<template>
  <div class="share">
    <el-main>
      <div class="tip" v-if="allData.date">
        <div class="tip_title">当前为预览页面，请点击下载按钮下载</div>
        <div>
          <el-button type="primary" @click="loadPdf" :loading="PdfType">下载</el-button>
        </div>
      </div>

      <div class="box">
        <div class="itemBox" ref="pdfBox">


          <div v-if="PdfType">
            <div style="font-family: 'FangSong', 'STFangsong', serif;line-height: 1.5em;">
              <div style="font-size: 29px;font-weight: bold;
    text-align: center;
    margin-top: 90px;
    ">
                {{ reportData.region.back_name }}知识产权工作分析报告
              </div>
              <div style="font-size: 21px;font-weight: bold;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 600px;">
                （{{ PdfType ? oldtimeFrame : timeFrame }}）
              </div>
              <div style="font-size: 18px;text-align: center;font-weight: bold;line-height: 36px;">编制单位：佛山市顺德区顺企知识产权保护服务中心
              </div>
              <div style="font-size: 18px;text-align: center;font-weight: bold;line-height: 36px;">数据支持：优专知识产权智慧管理平台</div>
            </div>
            <br style="page-break-before: always" />
            <div style="font-family: 'FangSong', 'STFangsong', serif;">
              <div style="font-size: 21px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
    margin-top: 10px;">目录</div>
              <div v-for="item in menuList" :key="item.id + 'ml'">
                <div style="font-weight: bold;font-size: 21px;line-height: 42px;">{{ item.title }}</div>
                <div style="text-indent: 2em;font-size: 18px;line-height: 36px;" v-for="item_ in item.children"
                  :key="item_.id + 'ml'">
                  {{ item_.title }}
                  <!-- <div style="text-indent: 3em;font-size: 15px;" v-for="item_1 in item_.children" :key="item_1.id + 'ml'">
                    {{ item_1.title }}
                  </div> -->
                </div>
              </div>
            </div>
            <br style="page-break-before: always" />
          </div>

          <div class="question">
            <div class="titleBig" v-if="allData.date && !PdfType">
              <div class="title">
                {{ timeFrame }}分析报告（{{ allData.start_time }}-{{ allData.end_time }}）
              </div>
            </div>

            <div class="topBox" v-if="reportData.region">

              <div v-for="item in menuList" :key="item.id">
                <!-- 区域知识产权概况新 -->
                <div v-if="item.id == 1 && roleData && changeList.valid_patent">
                  <div class="title1" :id="item.id" :ref="'BOX' + item.id">{{ item.title }}</div>

                  <div v-for="(item1, index) in item.children" :key="item1.id">
                    <div v-if="item1.id == 2">
                      <div class="title" :id="item1.id" :ref="'BOX' + item1.id">{{ item1.title }}</div>

                      <div v-for="item2 in item1.children" :key="item2.title">
                        <div v-if="item2.id == 5">

                          <div :id="item2.id" :ref="'BOX' + item2.id" class="textTitle titleSmallSize">

                            <div class="titleSmallSize1">1. {{ reportData.region.back_name }}专利授权情况</div>
                          </div>

                          <div class="textS">
                            <span>
                              {{ timeFrame }}，{{ reportData.region.back_name }}中国专利授权量<span class="number">{{
                                lawData.street_json.street_admin_arr.sum }}</span>件。其中，发明
                              专利授权量<span class="number">{{ lawData.street_json.street_admin_arr.invent }}</span>件，占比<span
                                class="number">{{ lawData.street_json.street_admin_arr.invent_ratio
                                }}</span>%;实用新型专利授权量<span class="number">{{ lawData.street_json.street_admin_arr.news
}}</span>件，占比
                              <span class="number">{{ lawData.street_json.street_admin_arr.news_ratio
                              }}</span>%;外观设计专利<span class="number">{{ lawData.street_json.street_admin_arr.apper
}}</span>件，占比<span class="number">{{ lawData.street_json.street_admin_arr.apper_ratio
}}</span>%。
                            </span>
                          </div>
                          <div class="legendText">图1 {{ timeFrame }}{{ reportData.region.back_name }}授权专利类型构成</div>

                          <div v-if="!PdfType" style="height:300px;width: 100%;" id="pieData1" ref="pieData1"></div>
                          <div v-if="PdfType && evaluationInfo.pieData1" style="margin-left: 32px;">
                            <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                              :src="evaluationInfo.pieData1">
                          </div>
                        </div>

                        <div v-if="item2.id == 28">
                          <div class="">
                            <div :id="item2.id" :ref="'BOX' + item2.id" class="textTitle titleSmallSize">

                              <div class="titleSmallSize1">2. {{
                                reportData.region.back_name }}各镇街专利授权情况</div>
                            </div>
                            <div class="textS" style="margin-bottom: 20px;">
                              <span>
                                {{ timeFrame }}{{ reportData.region.back_name }}专利授权总量中，
                                <span v-for="(item, index) in lawData.street_json.sum_rank">
                                  {{ item.name }}位居全区第{{ rankingName[index] }}，
                                </span>
                                各镇街专利授权量及占全区比例情况详见表1。其中:
                              </span>
                            </div>
                            <div class="textS" style="margin-bottom: 20px;">
                              <span>
                                {{ timeFrame }}{{ reportData.region.back_name }}发明专利授权量中，
                                <span v-for="(item, index) in lawData.street_json.invent_rank">
                                  {{ item.name }}位居全区第{{ rankingName[index] }}{{ index !=
                                    lawData.street_json.invent_rank.length
                                    - 1 ? '，' : ';' }}
                                </span>
                              </span>
                            </div>
                            <div class="textS" style="margin-bottom: 20px;">
                              <span>
                                {{ timeFrame }}{{ reportData.region.back_name }}实用新型专利授权量中，
                                <span v-for="(item, index) in lawData.street_json.news_rank">
                                  {{ item.name }}位居全区第{{ rankingName[index] }}{{ index !=
                                    lawData.street_json.news_rank.length
                                    -
                                    1 ? '，' : ';' }}
                                </span>
                              </span>
                            </div>
                            <div class="textS" style="margin-bottom: 20px;">
                              <span>
                                {{ timeFrame }}{{ reportData.region.back_name }}外观设计专利授权量中，
                                <span v-for="(item, index) in lawData.street_json.apper_rank">
                                  {{ item.name }}位居全区第{{ rankingName[index] }}{{ index !=
                                    lawData.street_json.apper_rank.length
                                    -
                                    1 ? '，' : ';' }}
                                </span>
                              </span>
                            </div>


                            <div>
                              <div class="legendText">表1 {{ timeFrame }}{{ reportData.region.back_name
                              }}各镇街专利授权情况
                              </div>

                              <table v-if="PdfType" border="1">
                                <tr>
                                  <th align="center">{{ lawData.street_json.table1_title.name }}</th>
                                  <th align="center">{{ lawData.street_json.table1_title.invent }}</th>
                                  <th align="center">{{ lawData.street_json.table1_title.invent_ratio }}</th>
                                  <th align="center">{{ lawData.street_json.table1_title.news }}</th>
                                  <th align="center">{{ lawData.street_json.table1_title.news_ratio }}</th>
                                  <th align="center">{{ lawData.street_json.table1_title.apper }}</th>
                                  <th align="center">{{ lawData.street_json.table1_title.apper_ratio }}</th>
                                  <th align="center">{{ lawData.street_json.table1_title.sum }}</th>
                                  <th align="center">{{ lawData.street_json.table1_title.sum_ratio }}</th>
                                </tr>
                                <tr v-for="(item, index) in lawData.street_json.table1.slice(0, 10)"
                                  :key="'table1' + index">
                                  <td align="center">{{ item.name }}</td>
                                  <td align="center">{{ item.invent }}</td>
                                  <td align="center">{{ item.invent_ratio }}</td>
                                  <td align="center">{{ item.news }}</td>
                                  <td align="center">{{ item.news_ratio }}</td>
                                  <td align="center">{{ item.apper }}</td>
                                  <td align="center">{{ item.apper_ratio }}</td>
                                  <td align="center">{{ item.sum }}</td>
                                  <td align="center">{{ item.sum_ratio }}</td>
                                </tr>
                              </table>
                              <el-table v-else border ref="table1"
                                :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                                :data="lawData.street_json.table1.slice(0, 10)">
                                <el-table-column align="center" prop="name" width="50"
                                  :label="lawData.street_json.table1_title.name">
                                </el-table-column>
                                <el-table-column align="center" prop="invent" width="65"
                                  :label="lawData.street_json.table1_title.invent">
                                </el-table-column>
                                <el-table-column align="center" prop="invent_ratio"
                                  :label="lawData.street_json.table1_title.invent_ratio">
                                </el-table-column>
                                <el-table-column align="center" prop="news" width="65"
                                  :label="lawData.street_json.table1_title.news">
                                </el-table-column>
                                <el-table-column align="center" prop="news_ratio"
                                  :label="lawData.street_json.table1_title.news_ratio">
                                </el-table-column>
                                <el-table-column align="center" prop="apper" width="65"
                                  :label="lawData.street_json.table1_title.apper">
                                </el-table-column>
                                <el-table-column align="center" prop="apper_ratio"
                                  :label="lawData.street_json.table1_title.apper_ratio">
                                </el-table-column>
                                <el-table-column align="center" prop="sum" width="65"
                                  :label="lawData.street_json.table1_title.sum">
                                </el-table-column>
                                <el-table-column align="center" prop="sum_ratio"
                                  :label="lawData.street_json.table1_title.sum_ratio">
                                </el-table-column>
                              </el-table>
                            </div>

                          </div>
                        </div>

                        <div v-if="item2.id == 29">
                          <div :id="item2.id" :ref="'BOX' + item2.id" class="textTitle titleSmallSize">

                            <div class="titleSmallSize1">3. 各镇（街）
                              专利授权量对比情况
                            </div>
                          </div>

                          <div class="textS">
                            <span>
                              各镇（街）{{ lawData.street_json.add_arr.title_this }}与{{
                                lawData.street_json.add_arr.title_this_last
                              }}专利授权量对比中{{ lawData.street_json.add_arr.month_this_street_name.length }}个镇（街），分别为
                              <span v-for="(item, index) in lawData.street_json.add_arr.month_this_street_name">{{ item
                              }}{{
  index != lawData.street_json.add_arr.month_this_street_name.length - 1 ? '、' : '；' }}
                              </span>
                              详见图2和表2。
                            </span>
                          </div>
                          <div class="legendText">图2 各镇（街）{{ lawData.street_json.add_arr.title_this }}与{{
                            lawData.street_json.add_arr.title_this_last
                          }}专利授权量对比图</div>
                          <div v-if="!PdfType" style="height:300px;width: 100%;" id="barData" ref="barData"></div>
                          <div v-if="PdfType && evaluationInfo.barData" style="margin-left: 32px;">
                            <img width="640" height="300" style="object-fit: contain;text-align: center;margin: 0 auto;"
                              :src="evaluationInfo.barData">
                          </div>


                          <div>
                            <div class="legendTextTop">表2 各镇（街）{{ lawData.street_json.add_arr.title_this }}与{{
                              lawData.street_json.add_arr.title_this_last
                            }}同比增长情况</div>
                            <table v-if="PdfType" border="1">
                              <tr>
                                <th align="center">{{ lawData.street_json.table2_title.name }}</th>
                                <th align="center">{{ lawData.street_json.table2_title.sum_last }}</th>
                                <th align="center">{{ lawData.street_json.table2_title.sum }}</th>
                                <th align="center">{{ lawData.street_json.table2_title.ratio }}</th>
                              </tr>
                              <tr v-for="(item, index) in lawData.street_json.table2.slice(0, 10)"
                                :key="'table2' + index">
                                <td align="center">{{ item.name }}</td>
                                <td align="center">{{ item.sum_last }}</td>
                                <td align="center">{{ item.sum }}</td>
                                <td align="center">{{ item.ratio }}</td>
                              </tr>
                            </table>
                            <el-table border v-else
                              :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                              :data="lawData.street_json.table2.slice(0, 10)" style="width: 100%">
                              <el-table-column align="center" prop="name" :label="lawData.street_json.table2_title.name">
                              </el-table-column>
                              <el-table-column align="center" prop="sum_last"
                                :label="lawData.street_json.table2_title.sum_last">
                              </el-table-column>
                              <el-table-column align="center" prop="sum" :label="lawData.street_json.table2_title.sum">
                              </el-table-column>
                              <el-table-column align="center" prop="ratio"
                                :label="lawData.street_json.table2_title.ratio">
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>

                        <div v-if="item2.id == 30">
                          <div :id="item2.id" :ref="'BOX' + item2.id" class="textTitle titleSmallSize">

                            <div class="titleSmallSize1">4. {{
                              reportData.region.back_name }}授权专利技术构成</div>
                          </div>

                          <div>
                            <div class="title_4">4.1 发明专利主要技术构成</div>

                            <div class="textS">
                              <span>
                                通过IPC分类号进行技术分类，展示{{ timeFrame }}，{{ reportData.region.back_name }}发明专利（授权）在各技术方向的数量分布情况。
                              </span>
                              <span>
                                由图3和表3可知，{{ timeFrame }}{{ reportData.region.back_name }}发明专利授权在
                                <span v-for="(item, index) in lawData.street_json.ipc_invent_ten_arr.slice(0, 3)">
                                  {{ item.title }}{{ index != 2 ? '、' : '' }}</span>类别中分布较多。
                              </span>
                            </div>

                            <div>
                              <div class="legendText">图3 发明专利主要技术构成</div>

                              <div v-if="!PdfType" style="height:300px;width: 100%;" id="pieData2" ref="pieData2"></div>
                              <div v-if="PdfType && evaluationInfo.pieData2" style="margin-left: 32px;">
                                <img width="576" height="270"
                                  style="object-fit: contain;text-align: center;margin: 0 auto;"
                                  :src="evaluationInfo.pieData2">
                              </div>

                              <div>
                                <div class="legendTextTop">表3 发明专利IPC分布排名TOP10</div>
                                <table v-if="PdfType" border="1">
                                  <tr>
                                    <th align="center">排名</th>
                                    <th align="center">IPC</th>
                                    <th align="center">注释</th>
                                    <th align="center">数量</th>
                                  </tr>
                                  <tr v-for="(item, index) in lawData.street_json.ipc_invent_ten_arr.slice(0, 10)"
                                    :key="'ipc_invent_ten_arr' + index">
                                    <td align="center">{{ item.rank }}</td>
                                    <td align="center">{{ item.ipc }}</td>
                                    <td align="center">{{ item.title }}</td>
                                    <td align="center">{{ item.num }}</td>
                                  </tr>
                                </table>
                                <el-table v-else border @row-click="tableclickName"
                                  :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                                  :data="lawData.street_json.ipc_invent_ten_arr.slice(0, 10)" style="width: 100%">
                                  <el-table-column align="center" width="80" prop="rank" label="排名">
                                  </el-table-column>
                                  <el-table-column align="center" width="160" prop="ipc" label="IPC">
                                  </el-table-column>
                                  <el-table-column prop="title" label="注释">
                                  </el-table-column>
                                  <el-table-column align="center" width="80" prop="num" label="数量">
                                  </el-table-column>
                                </el-table>
                              </div>
                            </div>
                          </div>

                          <div>
                            <div class="title_4">4.2 实用新型专利主要技术构成</div>
                            <div class="textS">
                              <span>
                                通过IPC分类号进行技术分类，展示{{ timeFrame }}，{{ reportData.region.back_name }}实用新型专利（授权）在各技术方向的数量分布情况。
                              </span>
                              <span>
                                由图4和表4可知，{{ timeFrame }}{{ reportData.region.back_name }}实用新型专利授权在
                                <span v-for="(item, index) in lawData.street_json.ipc_news_ten_arr.slice(0, 3)">
                                  {{ item.title }}{{ index != 2 ? '、' : '' }}</span>类别中分布较多。
                              </span>
                            </div>
                            <div>
                              <div class="legendText">图4 实用新型专利主要技术构成</div>

                              <div v-if="!PdfType" style="height:300px;width: 100%;" id="pieData3" ref="pieData3"></div>
                              <div v-if="PdfType && evaluationInfo.pieData3" style="margin-left: 32px;">
                                <img width="576" height="270"
                                  style="object-fit: contain;text-align: center;margin: 0 auto;"
                                  :src="evaluationInfo.pieData3">
                              </div>

                              <div>
                                <div class="legendTextTop">表4 实用新型专利IPC分布排名TOP10</div>
                                <table v-if="PdfType" border="1">
                                  <tr>
                                    <th align="center">排名</th>
                                    <th align="center">IPC</th>
                                    <th align="center">注释</th>
                                    <th align="center">数量</th>
                                  </tr>
                                  <tr v-for="(item, index) in lawData.street_json.ipc_news_ten_arr.slice(0, 10)"
                                    :key="'ipc_news_ten_arr' + index">
                                    <td align="center">{{ item.rank }}</td>
                                    <td align="center">{{ item.ipc }}</td>
                                    <td align="center">{{ item.title }}</td>
                                    <td align="center">{{ item.num }}</td>
                                  </tr>
                                </table>
                                <el-table border v-else
                                  :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                                  :data="lawData.street_json.ipc_news_ten_arr.slice(0, 10)" style="width: 100%">
                                  <el-table-column align="center" width="80" prop="rank" label="排名">
                                  </el-table-column>
                                  <el-table-column align="center" width="160" prop="ipc" label="IPC">
                                  </el-table-column>
                                  <el-table-column prop="title" label="注释">
                                  </el-table-column>
                                  <el-table-column align="center" width="80" prop="num" label="数量">
                                  </el-table-column>
                                </el-table>
                              </div>
                            </div>
                          </div>

                          <div>
                            <div class="title_4">4.3 外观设计专利主要技术构成</div>
                            <div class="textS">
                              <span>
                                通过洛迦诺分类号进行技术分类，展示{{ timeFrame }}，{{ reportData.region.back_name }}外观设计专利（授权）在各技术方向的数量分布情况。
                              </span>
                              <span>
                                由图5和表5可知，{{ timeFrame }}{{ reportData.region.back_name }}外观设计专利技术在
                                <span v-for="(item, index) in lawData.street_json.lc_apper_ten_arr.slice(0, 3)">
                                  {{ item.title }}{{ index != 2 ? '、' : '' }}</span>类别中分布较多。
                              </span>
                            </div>
                            <div>
                              <div class="legendText">图5 外观设计专利LOC分布排名TOP10</div>

                              <div v-if="!PdfType" style="height:300px;width: 100%;" id="pieData4" ref="pieData4"></div>
                              <div v-if="PdfType && evaluationInfo.pieData4" style="margin-left: 32px;">
                                <img width="576" height="270"
                                  style="object-fit: contain;text-align: center;margin: 0 auto;"
                                  :src="evaluationInfo.pieData4">
                              </div>
                              <div>
                                <div class="legendTextTop">表5 外观设计专利LOC分布排名TOP10</div>
                                <table v-if="PdfType" border="1">
                                  <tr>
                                    <th align="center">排名</th>
                                    <th align="center">LOC</th>
                                    <th align="center">注释</th>
                                    <th align="center">数量</th>
                                  </tr>
                                  <tr v-for="(item, index) in lawData.street_json.lc_apper_ten_arr.slice(0, 10)"
                                    :key="'lc_apper_ten_arr' + index">
                                    <td align="center">{{ item.rank }}</td>
                                    <td align="center">{{ item.lc }}</td>
                                    <td align="center">{{ item.title }}</td>
                                    <td align="center">{{ item.num }}</td>
                                  </tr>
                                </table>
                                <el-table border v-else
                                  :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                                  :data="lawData.street_json.lc_apper_ten_arr.slice(0, 10)" style="width: 100%">
                                  <el-table-column align="center" width="80" prop="rank" label="排名">
                                  </el-table-column>
                                  <el-table-column align="center" width="160" prop="lc" label="LOC">
                                  </el-table-column>
                                  <el-table-column prop="title" label="注释">
                                  </el-table-column>
                                  <el-table-column align="center" width="80" prop="num" label="数量">
                                  </el-table-column>
                                </el-table>
                              </div>

                            </div>
                          </div>
                        </div>

                        <div v-if="item2.id == 31">
                          <div :id="item2.id" :ref="'BOX' + item2.id" class="textTitle titleSmallSize">

                            <div class="titleSmallSize1">5. {{
                              reportData.region.back_name }}授权专利的专利权人排行榜</div>
                          </div>
                          <div class="textS">
                            <span>
                              {{ timeFrame }}，{{ reportData.region.back_name }}授权专利的专利权人排名前50中（以第一专利权人进行统计），

                              <span v-for="(item, index) in lawData.street_json.company_rank_arr_repeat">
                                {{ index }}占{{ item }}位，
                              </span>
                              具体专利权人分布详见表6。
                            </span>
                          </div>

                          <div>
                            <div class="legendTextTop">表6 {{ timeFrame }}{{ reportData.region.back_name
                            }}授权专利的专利权人排行榜TOP50</div>
                            <table v-if="PdfType" border="1">
                              <tr>
                                <th align="center">序号</th>
                                <th align="center">镇街</th>
                                <th align="center">公司名称</th>
                                <th align="center">授权专利数量</th>
                              </tr>
                              <tr v-for="(item, index) in lawData.street_json.company_rank_arr"
                                :key="'company_rank_arr' + index">
                                <td align="center">{{ item.rank }}</td>
                                <td align="center">{{ item.name }}</td>
                                <td align="center">{{ item.company }}</td>
                                <td align="center">{{ item.num }}</td>
                              </tr>
                            </table>
                            <el-table border v-else
                              :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                              :data="lawData.street_json.company_rank_arr" style="width: 100%">
                              <el-table-column align="center" width="80" prop="rank" label="序号">
                              </el-table-column>
                              <el-table-column align="center" width="160" prop="name" label="镇街">
                              </el-table-column>
                              <el-table-column prop="company" label="公司名称">
                              </el-table-column>
                              <el-table-column align="center" width="80" prop="num" label="授权专利数量">
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div v-if="item1.id == 3">
                      <div>
                        <div class="title" :id="item1.id" :ref="'BOX' + item1.id">{{ item1.title }}</div>
                        <div class="textS">
                          <span>
                            {{ timeFrame }}，{{ reportData.region.back_name }}PCT国际专利申请量<span class="number">{{
                              lawData.street_json.pct_sum }}件</span>。
                            其中，
                            <span v-for="(item, index) in lawData.street_json.pct_info_arr">
                              <span v-if="item.num > 0">
                                {{ item.name }}PCT国际专利申请量<span class="number">{{ item.num }}件</span>，位居全区第{{
                                  rankingName[index] }}；
                              </span>
                            </span>
                            （详见表7）
                          </span>
                        </div>
                        <div>
                          <div class="legendTextTop">表7 {{ timeFrame }}{{ reportData.region.back_name
                          }}各镇街PCT国际专利申请情况</div>
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center">所属区域</th>
                              <th align="center">PCT国际专利数量（件）</th>
                              <th align="center">占全区比例（%）</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.street_json.pct_info_arr.slice(0, 10)"
                              :key="'pct_info_arr' + index">
                              <td align="center">{{ item.name }}</td>
                              <td align="center">{{ item.num }}</td>
                              <td align="center">{{ item.ratio }}</td>
                            </tr>
                          </table>
                          <el-table border v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.street_json.pct_info_arr" style="width: 100%">
                            <el-table-column align="center" width="80" prop="name" label="所属区域">
                            </el-table-column>
                            <el-table-column align="center" prop="num" label="PCT国际专利数量（件）">
                            </el-table-column>
                            <el-table-column align="center" prop="ratio" label="占全区比例（%）">
                            </el-table-column>
                          </el-table>
                          <div class="legendText">图6 {{ timeFrame }}{{ reportData.region.back_name }}各镇街PCT国际专利申请量占全区比例情况
                          </div>
                          <div v-if="!PdfType" class="legendTextTop" style="height:300px;width: 100%;" id="pieData5"
                            ref="pieData5">
                          </div>
                          <div v-if="PdfType && evaluationInfo.pieData5" style="margin-left: 32px;">
                            <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                              :src="evaluationInfo.pieData5">
                          </div>


                        </div>
                      </div>
                    </div>

                    <div v-if="item1.id == 4">

                      <div class="title" :id="item1.id" :ref="'BOX' + item1.id">{{ item1.title }}</div>

                      <div v-for="item2 in item1.children" :key="item2.title">

                        <div v-if="item2.id == 32">
                          <div :id="item2.id" :ref="'BOX' + item2.id" class="textTitle titleSmallSize">
                            <div class="titleSmallSize1">1. 截至{{
                              allData.date_end.split('-').join('年') }}月{{
    reportData.region.back_name }}各镇街累计有效注册商标情况</div>
                          </div>
                          <div class="textS">
                            <span>
                              据统计，截至{{ allData.date_end.split('-').join('年') }}月，{{ reportData.region.back_name
                              }}累计有效注册商标量<span class="number">{{ lawData.street_json.trademark_sum
}}件</span>，各镇街累计有效注册商标量详见表8。
                            </span>
                            <span>
                              其中，
                              <span v-for="(item, index) in lawData.street_json.trademark_info_arr">
                                {{ item.name }}累计有效注册商标量<span class="number">{{ item.num }}件</span>，位居全区第{{
                                  rankingName[index] }}<span>{{
    lawData.street_json.trademark_info_arr.length - 1 == index ? '。' : '；' }}</span>
                              </span>
                            </span>
                          </div>

                          <div>
                            <div class="legendTextTop">表8 截至{{ allData.date_end.split('-').join('年') }}月{{
                              reportData.region.back_name
                            }}各镇街商标数据情况
                            </div>
                            <table v-if="PdfType" border="1">
                              <tr>
                                <th align="center">所属区域</th>
                                <th align="center">累计有效注册商标量（件）</th>
                                <th align="center">占全区比例（%）</th>
                              </tr>
                              <tr v-for="(item, index) in lawData.street_json.trademark_info_arr.slice(0, 10)"
                                :key="'trademark_info_arr' + index">
                                <td align="center">{{ item.name }}</td>
                                <td align="center">{{ item.num }}</td>
                                <td align="center">{{ item.ratio }}</td>
                              </tr>
                            </table>
                            <el-table border v-else
                              :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                              :data="lawData.street_json.trademark_info_arr" style="width: 100%">
                              <el-table-column align="center" width="80" prop="name" label="所属区域">
                              </el-table-column>
                              <el-table-column align="center" prop="num" label="累计有效注册商标量（件）">
                              </el-table-column>
                              <el-table-column align="center" prop="ratio" label="占全区比例（%）">
                              </el-table-column>
                            </el-table>
                            <div class="legendText">图7 {{ timeFrame }}{{ reportData.region.back_name }}各镇街商标有效注册量占全区比例情况
                            </div>

                            <div v-if="!PdfType" class="legendTextTop" style="height:300px;width: 100%;" id="pieData6"
                              ref="pieData6">
                            </div>
                            <div v-if="PdfType && evaluationInfo.pieData6" style="margin-left: 32px;">
                              <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                                :src="evaluationInfo.pieData6">
                            </div>

                          </div>
                        </div>

                        <div v-if="item2.id == 33">
                          <div :id="item2.id" :ref="'BOX' + item2.id" class="textTitle titleSmallSize">
                            <div class="titleSmallSize1">2. {{ reportData.region.back_name }}各镇街{{
                              lawData.street_json.date.last_end_month
                            }}与{{
  lawData.street_json.date.end_month }}商标量对比情况</div>
                          </div>

                          <div class="textS">
                            <span>
                              各镇街商标量同比增长情况详见表9。
                            </span>
                          </div>

                          <div class="legendTextTop">表9 {{ reportData.region.back_name }}各镇街{{
                            lawData.street_json.date.last_end_month }}与{{
    lawData.street_json.date.end_month }}同比增长情况</div>

                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center">{{ lawData.street_json.table3_title.name }}</th>
                              <th align="center">{{ lawData.street_json.table3_title.sum }}</th>
                              <th align="center">{{ lawData.street_json.table3_title.sum_last }}</th>
                              <th align="center">{{ lawData.street_json.table3_title.ratio }}</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.street_json.table3.slice(0, 10)" :key="'table3' + index">
                              <td align="center">{{ item.name }}</td>
                              <td align="center">{{ item.sum }}</td>
                              <td align="center">{{ item.sum_last }}</td>
                              <td align="center">{{ item.ratio }}</td>
                            </tr>
                          </table>

                          <el-table border v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.street_json.table3" style="width: 100%">
                            <el-table-column align="center" width="80" prop="name"
                              :label="lawData.street_json.table3_title.name">
                            </el-table-column>
                            <el-table-column align="center" prop="sum" :label="lawData.street_json.table3_title.sum">
                            </el-table-column>
                            <el-table-column align="center" prop="sum_last"
                              :label="lawData.street_json.table3_title.sum_last">
                            </el-table-column>
                            <el-table-column align="center" width="120" prop="ratio"
                              :label="lawData.street_json.table3_title.ratio">
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>

                    </div>


                  </div>
                </div>

                <div style="margin-bottom: 40px;">
                </div>


                <!-- 区域走访情况 -->
                <div v-if="item.id == 6">
                  <div class="title1" :id="item.id" :ref="'BOX' + item.id">{{ item.title }}</div>

                  <div v-for="item2 in item.children" :key="item2.id">

                    <!-- 走访分析 -->
                    <div v-if="item2.id == 7">
                      <div class="title" :id="item2.id" :ref="'BOX' + item2.id">{{ item2.title }}
                      </div>
                      <div class="textS">
                        <span>
                          <span>
                            <span class="number">
                              <span>{{ timeFrame }}</span>
                            </span>，{{ reportData.region.back_name }}累计开展走访工作<span class="number">{{ reportData.visit_num
                            }}次</span>。</span>

                          <span v-if="reportData.visit_num">
                            走访人员：在<span class="number">
                              <span>{{ timeFrame }}</span>
                            </span>
                            <span v-if="hasGreaterThanTwo(reportData.value_arr)">
                              的走访工作中，
                              <span v-for="(item, index) in name_arr">
                                <span>
                                  <span class="number">
                                    {{ item.name }}
                                  </span>参与走访<span class="number">{{ item.number }}次</span>
                                  <span>{{ name_arr.length != index + 1 ? '、' : '。' }}</span>
                                </span>
                              </span>
                            </span>
                            <span v-else>
                              的走访工作情况如下：
                            </span>
                          </span>
                        </span>

                      </div>
                      <div v-if="reportData.visit_num && name_arr.length > 1">
                        <div :class="PdfType ? 'titleSmallSize2' : 'title titleSmall titleSmallSize'">{{
                          reportData.region.back_name }}走访工作情况</div>
                        <div v-if="!PdfType" class="echartsBox" ref="bar"></div>
                        <div v-if="PdfType && evaluationInfo.bar">
                          <img width="640" height="185" style="object-fit: contain;text-align: center;margin: 0 auto;"
                            :src="evaluationInfo.bar">
                        </div>
                      </div>
                    </div>

                    <!-- 走访对象类型 -->
                    <div class="itemData" v-if="item2.id == 8">
                      <div class="title" :id="item2.id" :ref="'BOX' + item2.id">{{ item2.title }}
                      </div>

                      <div class="textS">
                        <span>
                          <div>
                            <span class="number">
                              <span>{{ timeFrame }}</span>
                            </span>
                            共开展走访<span class="number" style="cursor: pointer;" @click="pushworkWaitvisit">{{
                              reportData.visit_num }}家次</span>。
                            <span v-if="reportData.company_num">
                              其中，走访企业<span class="number">{{ reportData.company_num }}</span>次，涉及企业<span class="number">{{
                                reportData.company_true_num }}家</span>；
                            </span>
                            <span v-if="reportData.organization_num">
                              走访知识产权服务机构<span class="number">{{ reportData.organization_num }}</span>次，涉及机构<span
                                class="number">{{ reportData.organization_true_num }}家</span>；
                            </span>
                          </div>

                          <div>
                            <span>
                              <span v-if="company_visit_arr.length"
                                style="font-weight: bold;color: #000000;">多次走访的企业：</span>
                              <span v-for="(item, index) in company_visit_arr">
                                <span class="number">{{ item.name }}</span>走访<span class="number">{{ item.number
                                }}</span>次
                                <span>{{ company_visit_arr.length != index + 1 ? '、' : '。' }}</span>
                              </span>
                            </span>
                          </div>
                          <div>
                            <span v-if="organization_list.length">
                              <span v-if="organization_list.length"
                                style="font-weight: bold;color: #000000;">多次走访的机构：</span>
                              <span v-for="(item, index) in organization_list">
                                <span class="number">{{ item.name }}</span>走访<span class="number">{{ item.number
                                }}</span>次
                                <span>{{ organization_list.length != index + 1 ? '、' : '。' }}</span>
                              </span>
                            </span>
                          </div>

                        </span>

                      </div>
                      <div v-if="reportData.company_num && reportData.organization_num">
                        <div :class="PdfType ? 'titleSmallSize2' : 'title titleSmall titleSmallSize'">{{
                          reportData.region.back_name }}走访对象情况</div>
                        <div v-if="!PdfType" class="echartsBox" style="height: 285px;" ref="pie"></div>
                        <div v-if="PdfType && evaluationInfo.pie" style="margin-left: 32px;">
                          <img width="576" height="256" style="object-fit: contain;text-align: center;margin: 0 auto;"
                            :src="evaluationInfo.pie">
                        </div>
                      </div>
                    </div>

                    <!-- 走访企业的荣誉情况汇总 -->
                    <div class="itemData" v-if="item2.id == 9">
                      <div class="title" :id="item2.id" :ref="'BOX' + item2.id">{{ item2.title }}</div>

                      <div class="textS">
                        <span>
                          在<span class="number">
                            <span>{{ timeFrame }}</span>
                          </span>期间走访的<span class="number">{{
                            reportData.company_num
                          }}家</span>企业中，获评
                          国家示范企业<span class="number">{{ reportData.one }}</span>家、
                          国家优势企业<span class="number">{{ reportData.two }}</span>家、
                          省级示范企业<span class="number">{{ reportData.three }}</span>家、
                          专精特新小巨人<span class="number">{{ reportData.six }}</span>家、
                          专精特新企业<span class="number">{{ reportData.five }}</span>家、
                          高新技术企业<span class="number">{{ reportData.four }}</span>家。
                        </span>

                      </div>
                      <div v-if="tableData_one_arr.length" :class="PdfType ? 'titleSmallSize2' : 'title titleSmall titleSmallSize'">{{
                        reportData.region.back_name }}走访对象情况</div>
                      <div style="text-indent: 0px;" class="table table1" v-if="tableData_one_arr.length">
                        <table  v-if="PdfType" border="1">
                          <tr>
                            <th align="center"></th>
                            <th align="center">类别</th>
                            <th align="center">企业名称</th>
                            <th align="center">获奖年份</th>
                          </tr>
                          <tr v-for="(item, index) in tableData_one_arr.slice(0, 10)" :key="'tableData_one_arr' + index">
                            <td align="center">{{ index + 1 }}</td>
                            <td align="center">{{ item.name }}</td>
                            <td align="center">{{ item.company }}</td>
                            <td align="center">{{ item.year }}</td>
                          </tr>
                        </table>
                        <el-table @row-click="tableclick" border v-else
                          :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                          :data="tableData_one_arr.slice(0, 10)" :span-method="objectSpanMethod"
                          style="width: 100%; margin-top: 20px">
                          <el-table-column type="index" width="40" label="" align="center">
                          </el-table-column>
                          <el-table-column prop="name" label="类别" width="150" align="center">
                          </el-table-column>
                          <el-table-column prop="company" label="企业名称" align="center">
                          </el-table-column>
                          <el-table-column prop="year" label="获奖年份" width="100" align="center">
                          </el-table-column>
                        </el-table>
                        <div class="more" @click="moreList('visit_json', 'honor_one_arr')"
                          v-if="tableData_one_arr.length > 10 && !PdfType">
                          查看全部 ></div>
                        <span v-if="tableData_one_arr.length > 10 && PdfType">
                          **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）
                        </span>
                      </div>

                      <div class="table table1" v-if="tableData_two_arr.length">
                        <table v-if="PdfType" border="1">
                          <tr>
                            <th align="center"></th>
                            <th align="center">类别</th>
                            <th align="center">企业名称</th>
                            <th align="center">获奖年份</th>
                          </tr>
                          <tr v-for="(item, index) in tableData_two_arr.slice(0, 10)" :key="'tableData_two_arr' + index">
                            <td align="center">{{ item.rank }}</td>
                            <td align="center">{{ item.name }}</td>
                            <td align="center">{{ item.company }}</td>
                            <td align="center">{{ item.year }}</td>
                          </tr>
                        </table>
                        <el-table v-else @row-click="tableclick" border
                          :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                          :data="tableData_two_arr.slice(0, 10)" :span-method="objectSpanMethod2"
                          style="width: 100%; margin-top: 20px">
                          <el-table-column type="index" width="40" label="" align="center">
                          </el-table-column>
                          <el-table-column prop="name" label="类别" width="150" align="center">
                          </el-table-column>
                          <el-table-column prop="company" label="企业名称" align="center">
                          </el-table-column>
                          <el-table-column prop="year" label="获奖年份" width="100" align="center">
                          </el-table-column>
                        </el-table>
                        <div class="more" @click="moreList('visit_json', 'honor_two_arr')"
                          v-if="tableData_two_arr.length > 10 && !PdfType">
                          查看全部 ></div>
                        <div v-if="tableData_two_arr.length > 10 && PdfType" style="margin-top: 5px;">
                          <span>**以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</span>
                        </div>

                      </div>

                      <div class="table table1" v-if="tableData_three_arr.length">
                        <table v-if="PdfType" border="1">
                          <tr>
                            <th align="center"></th>
                            <th align="center">类别</th>
                            <th align="center">企业名称</th>
                            <th align="center">获奖年份</th>
                          </tr>
                          <tr v-for="(item, index) in tableData_three_arr.slice(0, 10)"
                            :key="'tableData_three_arr' + index">
                            <td align="center">{{ item.rank }}</td>
                            <td align="center">{{ item.name }}</td>
                            <td align="center">{{ item.company }}</td>
                            <td align="center">{{ item.year }}</td>
                          </tr>
                        </table>
                        <el-table v-else @row-click="tableclick" border
                          :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                          :data="tableData_three_arr.slice(0, 10)" :span-method="objectSpanMethod3"
                          style="width: 100%; margin-top: 20px">
                          <el-table-column type="index" width="40" label="" align="center">
                          </el-table-column>
                          <el-table-column prop="name" label="类别" width="150" align="center">
                          </el-table-column>
                          <el-table-column prop="company" label="企业名称" align="center">
                          </el-table-column>
                          <el-table-column prop="year" label="获奖年份" width="100" align="center">
                          </el-table-column>
                        </el-table>
                        <div class="more" @click="moreList('visit_json', 'honor_three_arr')"
                          v-if="tableData_three_arr.length > 10 && !PdfType">查看全部 ></div>
                        <div v-if="tableData_three_arr.length > 10 && PdfType" style="margin-bottom: 0px;">
                          **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>
                      </div>
                      <div>
                        **针对国家知识产权优势企业、省级知识产权示范企业，可逐步引导和培育其成为国家知识产权示范企业。
                      </div>

                      <div class="table table1" v-if="tableData_six_arr.length">
                        <table v-if="PdfType" border="1">
                          <tr>
                            <th align="center"></th>
                            <th align="center">类别</th>
                            <th align="center">企业名称</th>
                          </tr>
                          <tr v-for="(item, index) in tableData_six_arr.slice(0, 10)" :key="'tableData_six_arr' + index">
                            <td align="center">{{ item.rank }}</td>
                            <td align="center">{{ item.name }}</td>
                            <td align="center">{{ item.company }}</td>
                          </tr>
                        </table>
                        <el-table v-else @row-click="tableclick" border
                          :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                          :data="tableData_six_arr.slice(0, 10)" :span-method="objectSpanMethod6"
                          style="width: 100%; margin-top: 20px">
                          <el-table-column type="index" width="40" label="" align="center">
                          </el-table-column>
                          <el-table-column prop="name" label="类别" width="150" align="center">
                          </el-table-column>
                          <el-table-column prop="company" label="企业名称" align="center">
                          </el-table-column>
                        </el-table>
                        <div class="more" @click="moreList('visit_json', 'honor_six_arr')"
                          v-if="tableData_six_arr.length > 10 && !PdfType">
                          查看全部 ></div>
                        <div v-if="tableData_six_arr.length > 10 && PdfType" style="margin-top: 5px;">
                          **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                      </div>

                      <div class="table table1" v-if="tableData_five_arr.length">
                        <table v-if="PdfType" border="1">
                          <tr>
                            <th align="center"></th>
                            <th align="center">类别</th>
                            <th align="center">企业名称</th>
                          </tr>
                          <tr v-for="(item, index) in tableData_five_arr.slice(0, 10)"
                            :key="'tableData_five_arr' + index">
                            <td align="center">{{ item.rank }}</td>
                            <td align="center">{{ item.name }}</td>
                            <td align="center">{{ item.company }}</td>
                          </tr>
                        </table>
                        <el-table v-else @row-click="tableclick" border
                          :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                          :data="tableData_five_arr.slice(0, 10)" :span-method="objectSpanMethod5"
                          style="width: 100%; margin-top: 20px">
                          <el-table-column type="index" width="40" label="" align="center">
                          </el-table-column>
                          <el-table-column prop="name" label="类别" width="150" align="center">
                          </el-table-column>
                          <el-table-column prop="company" label="企业名称" align="center">
                          </el-table-column>
                        </el-table>
                        <div class="more" @click="moreList('visit_json', 'honor_five_arr')"
                          v-if="tableData_five_arr.length > 10 && !PdfType">查看全部 ></div>
                        <div v-if="tableData_five_arr.length > 10 && PdfType" style="margin-top: 5px;">
                          **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                      </div>

                      <div class="table table1" v-if="tableData_four_arr.length">
                        <table v-if="PdfType" border="1">
                          <tr>
                            <th align="center"></th>
                            <th align="center">类别</th>
                            <th align="center">企业名称</th>
                          </tr>
                          <tr v-for="(item, index) in tableData_four_arr.slice(0, 10)"
                            :key="'tableData_four_arr' + index">
                            <td align="center">{{ item.rank }}</td>
                            <td align="center">{{ item.name }}</td>
                            <td align="center">{{ item.company }}</td>
                          </tr>
                        </table>
                        <el-table v-else @row-click="tableclick" border
                          :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                          :data="tableData_four_arr.slice(0, 10)" :span-method="objectSpanMethod4"
                          style="width: 100%; margin-top: 20px">
                          <el-table-column type="index" width="40" label="" align="center">
                          </el-table-column>
                          <el-table-column prop="name" label="类别" width="150" align="center">
                          </el-table-column>
                          <el-table-column prop="company" label="企业名称" align="center">
                          </el-table-column>
                        </el-table>
                        <div class="more" @click="moreList('visit_json', 'honor_four_arr')"
                          v-if="tableData_four_arr.length > 10 && !PdfType">查看全部 ></div>
                        <div v-if="tableData_four_arr.length > 10 && PdfType" style="margin-bottom: 5px;">
                          **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                      </div>

                      <div>
                        **针对已获评“专精特新小巨人企业”、“专精特新企业”，可充分推动其完善知识产权全链条中的各个环节，为其打造“省级知识产权示范企业—国家级知识产权优势企业—国家级知识产权示范企业”的培育规划，逐步引导其成为
                        广州开发区 的知识产权强企，获得更多知识产权领域荣誉。
                      </div>
                    </div>

                    <!-- 需求记录及跟进详情 -->
                    <div class="itemData" v-if="item2.id == 10">
                      <div class="title" :id="item2.id" :ref="'BOX' + item2.id">{{ item2.title }}</div>

                      <div class="textS">
                        <span>
                          在<span class="number">
                            <span>{{ timeFrame }}</span>
                          </span>开展的<span class="number">{{
                            reportData.visit_num
                          }}</span>家次走访中，新增收集企业需求<span class="number">{{ reportData.demand_add_count? reportData.demand_add_count : 0 }}项</span>；截至当前，累计收集企业需求共
                          <span class="number">{{ reportData.demand_count }}项</span><span
                            v-if="reportData.demand_count">，</span><span v-if="reportData.demand_count" class="number">{{
                              reportData.demand_true_count }}项</span>已作及时处理并解决，需求解决率为<span class="number">{{
    reportData.ratio
  }}%</span>
                        </span>
                      </div>

                      <div v-if="reportData.demand_count"
                        :class="PdfType ? 'titleSmallSize2' : 'title titleSmall titleSmallSize'">{{
                          reportData.region.back_name
                        }}走访需求收集情况表</div>
                      <div v-if="reportData.demand_count" class="table table1">
                        <table v-if="PdfType" border="1">
                          <tr>
                            <th align="center"></th>
                            <th align="center">企业/日期</th>
                            <th align="center">需求状态/需求记录</th>
                            <th align="center">解决方案</th>
                          </tr>
                          <tr v-for="(item, index) in tableData2.slice(0, 10)" :key="'tableData2' + index">
                            <td align="center">{{ index + 1 }}</td>
                            <td align="center">
                              <div class="merge">
                                <div>
                                  {{ item.company_name }}
                                </div>
                                <div>
                                  {{ item.so_time ? item.so_time.slice(0, 10) : '' }}
                                </div>
                              </div>
                            </td>
                            <td align="center">
                              <div class="merge">
                                <div>
                                  <span  class="blue" v-if="item.status"> {{ item.status ? '已解决' : '未解决' }} </span>
                                  <span  v-else class="red"> {{ item.status ? '已解决' : '未解决' }} </span>
                                </div>
                                <span>
                                  {{ item.des }}
                                </span>
                              </div>
                            </td>
                            <td align="center">{{ item.solve_des }}</td>
                          </tr>
                        </table>
                        <el-table v-else @row-click="tableclick"
                          :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                          :data="tableData2.slice(0, 10)" style="width: 100%" border>
                          <el-table-column type="index" width="40" label="" align="center">
                          </el-table-column>
                          <el-table-column prop="so_time" label="企业/走访日期" width="160" align="center">
                            <template slot-scope="scope">
                              <div class="merge">
                                <div>
                                  {{ scope.row.company_name }}
                                </div>
                                <div>
                                  {{ scope.row.so_time ? scope.row.so_time.slice(0, 10) : '' }}
                                </div>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column label="需求状态/需求记录" align="center">
                            <template slot-scope="scope">
                              <div class="merge">
                                <div>
                                  <div class="blue" v-if="scope.row.status">
                                    {{ scope.row.status ? '已解决' : '未解决' }}
                                  </div>
                                  <div v-else class="red">
                                    {{ scope.row.status ? '已解决' : '未解决' }}
                                  </div>
                                </div>
                                <div>
                                  {{ scope.row.des }}
                                </div>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column prop="solve_des" label="解决方案">
                          </el-table-column>
                        </el-table>
                        <div class="more" @click="moreList('visit_json', 'demand_list')"
                          v-if="tableData2.length > 10 && !PdfType">
                          查看全部
                          >
                        </div>
                        <div v-if="tableData2.length > 10 && PdfType" style="margin-bottom: 5px;">
                          **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>
                      </div>
                    </div>

                    <!-- 需求热度标签 -->
                    <div class="itemData" v-if="item2.id == 11">
                      <div class="title" :id="item2.id" :ref="'BOX' + item2.id">{{ item2.title }}</div>
                      <div class="textS">
                        <span v-if="reportData.demand_result.length">
                          通过需求情况表可见，在收集到的<span class="number">{{ reportData.demand_count }}项</span>需求中，主要聚焦在
                          <span v-for="(item, index) in reportData.demand_result" @click="demandData(item.name)">
                            <span class="number">{{ item.name }}
                            </span>
                            <span v-if="reportData.demand_result.length != index + 1">、</span>
                          </span>
                          <span>
                            等方面。
                          </span>
                        </span>
                        <span v-else>
                          通过需求情况表可见，在收集到的<span class="number">{{ reportData.demand_count }}项</span>需求中。
                        </span>

                      </div>

                      <div>
                        <div :class="PdfType ? 'titleSmallSize2' : 'title titleSmall titleSmallSize'">企业走访情况</div>

                        <div class="visitBox" v-if="!PdfType">
                          <div :class="PdfType ? 'visitItem1' : 'visitItem'">
                            <div>走访企业</div>
                            <div :class="PdfType ? 'number1' : 'number'">{{ reportData.company_num +
                              reportData.organization_num }}</div>
                          </div>
                          <div :class="PdfType ? 'visitItem1' : 'visitItem'">
                            <div>企业需求</div>
                            <div :class="PdfType ? 'number2' : 'number'">{{ reportData.demand_count }}</div>
                          </div>
                          <div :class="PdfType ? 'visitItem1' : 'visitItem'">
                            <div>已解决需求</div>
                            <div :class="PdfType ? 'number3' : 'number'">{{ reportData.demand_true_count }}</div>
                          </div>
                          <div :class="PdfType ? 'visitItem1' : 'visitItem'">
                            <div>需求解决率</div>
                            <div :class="PdfType ? 'number4' : 'number'">{{ reportData.ratio }}%</div>
                          </div>
                        </div>
                        <div v-else>
                          <table border="1">
                            <tr>
                              <th align="center">走访企业</th>
                              <th align="center">企业需求</th>
                              <th align="center">已解决需求</th>
                              <th align="center">需求解决率</th>
                            </tr>
                            <tr>
                              <td align="center">{{ reportData.company_num + reportData.organization_num }}</td>
                              <td align="center">{{ reportData.demand_count }}</td>
                              <td align="center">{{ reportData.demand_true_count }}</td>
                              <td align="center">{{ reportData.ratio }}</td>
                            </tr>
                          </table>
                        </div>

                        <div :class="PdfType ? 'titleSmallSize2' : 'title titleSmall titleSmallSize'">企业需求情况</div>


                        <el-row :gutter="0" style="height: 100%" v-if="!PdfType">
                          <el-col :span="24">
                            <el-row :gutter="10">
                              <el-col :span="6" :style="{ '--bgc': item.bgc }" v-for="(item, index) in demandList"
                                :key="index" class="demand_box">
                                <div class="left_demand" @click="demandData(item.value)">
                                  <div class="left_demand_new">
                                    <div class="demand_title">
                                      <span style="color: initial">{{ item.value }}</span>
                                    </div>
                                    <div>
                                      <span style="font-size: 26px; margin-right: 5px; font-weight: bold">
                                        <CountTo :startVal="0" :endVal="Number(item.Number)" :duration="2100" />
                                      </span>{{ item.Company }}
                                    </div>
                                  </div>
                                </div>
                              </el-col>
                            </el-row>
                          </el-col>
                          <el-col :span="24" style="height: 300px"
                            v-if="reportData.demand_count && reportData.demand_result.length > 1">
                            <div v-if="!PdfType" ref="pie_demand" style="height: 300px;width:100%;margin-top: 10px;">
                            </div>
                            <div v-if="PdfType && evaluationInfo.pie_demand" style="margin-left: 32px;">
                              <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                                :src="evaluationInfo.pie_demand">
                            </div>
                          </el-col>
                        </el-row>

                        <div v-else>
                          <table border="1">
                            <tr>
                              <th align="center" v-for="(item, index) in demandList" :key="item.value + index">{{
                                item.value }}</th>
                            </tr>
                            <tr>
                              <td align="center" v-for="(item, index) in demandList"
                                :key="item.value + index + item.Company">
                                {{ item.Number }}
                                {{ item.Company }}
                              </td>
                            </tr>
                          </table>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>

                <div style="margin-bottom: 40px;">
                </div>

                <!-- 六、法律事件分析 -->
                <div v-if="item.id == 12">
                  <div class="itemData">
                    <div class="title1" :id="item.id" :ref="'BOX' + item.id">{{ item.title }}</div>

                    <div v-for="item3 in item.children" :key="item3.id">
                      <div v-if="item3.id == 13">
                        <div class="title" :id="item3.id" :ref="'BOX' + item3.id">{{ item3.title }}</div>
                        <div>
                          <div v-if="lawData.one_json.tongji_patent.length">
                            <div class="textS" v-if="lawData.one_json.tongji_patent.length">
                              <span>
                                <div style="margin-bottom: 0;">
                                  在<span class="number">
                                    <span>{{ timeFrame }}</span>
                                  </span>，{{ reportData.region.back_name }}累计获得新授权专利<span class="number">{{
                                    lawData.one_json.tongji_patent[0].value + lawData.one_json.tongji_patent[1].value +
                                    lawData.one_json.tongji_patent[2].value }}</span>件，涉及创新主体<span class="number">{{
    lawData.one_json.table1_num + lawData.one_json.table2_num +
    lawData.one_json.table3_num
  }}</span>家。
                                </div>
                                <div>
                                  <div style="margin-bottom: 0;">
                                    其中，发明专利<span class="number">{{ lawData.one_json.tongji_patent[0].value
                                    }}</span>件，占比<span class="number">
                                      {{ Math.round(((lawData.one_json.tongji_patent[0].value /
                                        (lawData.one_json.tongji_patent[0].value + lawData.one_json.tongji_patent[1].value +
                                          lawData.one_json.tongji_patent[2].value)) * 100) * 100) / 100 }}</span>%，涉及创新主体<span
                                      class="number">{{ lawData.one_json.table1_num }}</span>家。
                                  </div>
                                  <div style="margin-bottom: 0;">
                                    外观设计专利<span class="number">{{ lawData.one_json.tongji_patent[1].value
                                    }}</span>件，占比<span class="number">{{
  Math.round(((lawData.one_json.tongji_patent[1].value /
    (lawData.one_json.tongji_patent[0].value + lawData.one_json.tongji_patent[1].value +
      lawData.one_json.tongji_patent[2].value)) * 100) * 100) / 100 }}</span>%，涉及创新主体<span
                                      class="number">{{ lawData.one_json.table2_num }}</span>家。
                                  </div>
                                  <div style="margin-bottom: 0;">
                                    实用新型专利<span class="number">{{ lawData.one_json.tongji_patent[2].value
                                    }}</span>件，占比<span class="number">{{
  Math.round(((lawData.one_json.tongji_patent[2].value /
    (lawData.one_json.tongji_patent[0].value + lawData.one_json.tongji_patent[1].value +
      lawData.one_json.tongji_patent[2].value)) * 100) * 100) / 100 }}</span>%，涉及创新主体<span
                                      class="number">{{ lawData.one_json.table3_num }}</span>家。
                                  </div>

                                </div>

                              </span>
                            </div>

                            <div v-if="!PdfType">
                              <div
                                v-if="lawData.one_json.tongji_patent.length > 1 && lawData.one_json.tongji_patent[0].value + lawData.one_json.tongji_patent[1].value + lawData.one_json.tongji_patent[2].value"
                                ref="pie_low1" style="height: 300px;width:100%"></div>
                            </div>
                            <div v-if="PdfType && evaluationInfo.pie_low1" style="margin-left: 32px;">
                              <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                                :src="evaluationInfo.pie_low1">
                            </div>
                          </div>

                          <div v-for="item3_ in item3.children" :key="item3_.id">
                            <div v-if="item3_.id == 18">
                              <div class="textTitle titleSmallSize" :id="item3_.id" :ref="'BOX' + item3_.id">
                                <div class="titleSmallSize1">1. 新授权发明专利申请人清单（共<span class="number">{{
                                  lawData.one_json.table1_num
                                }}</span>家）：</div>
                              </div>
                              <div class="table table1" v-if="lawData.one_json.table1.length">
                                <table v-if="PdfType" border="1">
                                  <tr>
                                    <th align="center"></th>
                                    <th align="center">走访情况</th>
                                    <th align="center">申请人</th>
                                    <th align="center">专利数量</th>
                                    <th align="center">走访次数</th>
                                  </tr>
                                  <tr v-for="(item, index) in lawData.one_json.table1.slice(0, 10)"
                                    :key="'lawData.one_json.table1' + index">
                                    <td align="center">{{ item.rank }}</td>
                                    <td align="center">
                                      <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6"> {{ item.tip }}
                                      </div>
                                      <div v-else class="red"> {{ item.tip }} </div>
                                    </td>
                                    <td align="center">{{ item.company }}</td>
                                    <td align="center">{{ item.apc_num }}</td>
                                    <td align="center">
                                      <div class="merge">
                                        <div>
                                          {{ item.num }}次
                                        </div>
                                      </div>
                                    </td>
                                  </tr>
                                </table>
                                <el-table border @row-click="tableclickName" v-else
                                  :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                                  :data="lawData.one_json.table1.slice(0, 10)" style="width: 100%">
                                  <el-table-column type="index" width="40" label="" align="center">
                                  </el-table-column>
                                  <el-table-column prop="company" width="100" label="走访情况" align="center">
                                    <template slot-scope="scope">
                                      <div class="merge">
                                        <div>
                                          <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                            {{ scope.row.tip }}
                                          </div>
                                          <div v-else class="red">
                                            {{ scope.row.tip }}
                                          </div>
                                        </div>
                                      </div>
                                    </template>
                                  </el-table-column>
                                  <el-table-column prop="company" label="申请人">
                                  </el-table-column>
                                  <el-table-column prop="apc_num" label="专利数量" align="center" width="100">
                                  </el-table-column>
                                  <el-table-column prop="num" label="走访次数" align="center" width="100">
                                    <template slot-scope="scope">
                                      <div class="merge">
                                        <div>
                                          {{ scope.row.num }}次
                                        </div>
                                      </div>
                                    </template>
                                  </el-table-column>
                                </el-table>
                                <div style="margin-top: 5px;">
                                  **因有可能存在共同申请、共同作为权利人的情况，所以在数据统计时会出现非本区域内的企业，敬请知悉
                                </div>
                                <div class="more" @click="moreList('one_json', 'table1')"
                                  v-if="lawData.one_json.table1.length > 10 && !PdfType">
                                  查看全部
                                  >
                                </div>
                                <div v-if="lawData.one_json.table1.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>
                              </div>
                            </div>
                            <div v-if="item3_.id == 19">

                              <div class="textTitle titleSmallSize" :id="item3_.id" :ref="'BOX' + item3_.id">

                                <div class="titleSmallSize1">2. 新授权实用新型专利申请人清单（共<span class="number">{{
                                  lawData.one_json.table2_num
                                }}</span>家）：</div>
                              </div>
                              <div class="table table1" v-if="lawData.one_json.table2.length">
                                <table v-if="PdfType" border="1">
                                  <tr>
                                    <th align="center"></th>
                                    <th align="center">走访情况</th>
                                    <th align="center">申请人</th>
                                    <th align="center">专利数量</th>
                                    <th align="center">走访次数</th>
                                  </tr>
                                  <tr v-for="(item, index) in lawData.one_json.table2.slice(0, 10)"
                                    :key="'lawData.one_json.table2' + index">
                                    <td align="center">{{ item.rank }}</td>
                                    <td align="center">
                                      <div class="merge">
                                        <div>
                                          <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6">
                                            {{ item.tip }}
                                          </div>
                                          <div v-else class="red">
                                            {{ item.tip }}
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td align="center">{{ item.company }}</td>
                                    <td align="center">{{ item.apc_num }}</td>
                                    <td align="center">
                                      <div class="merge">
                                        <div>
                                          {{ item.num }}次
                                        </div>
                                      </div>
                                    </td>
                                  </tr>
                                </table>
                                <el-table border @row-click="tableclickName" v-else
                                  :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                                  :data="lawData.one_json.table2.slice(0, 10)" style="width: 100%">
                                  <el-table-column type="index" width="40" label="" align="center">
                                  </el-table-column>
                                  <el-table-column prop="company" width="100" label="走访情况" align="center">
                                    <template slot-scope="scope">
                                      <div class="merge">
                                        <div>
                                          <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                            {{ scope.row.tip }}
                                          </div>
                                          <div v-else class="red">
                                            {{ scope.row.tip }}
                                          </div>
                                        </div>
                                      </div>
                                    </template>
                                  </el-table-column>
                                  <el-table-column prop="company" label="申请人">
                                  </el-table-column>
                                  <el-table-column prop="apc_num" label="专利数量" align="center" width="100">
                                  </el-table-column>
                                  <el-table-column prop="num" label="走访次数" align="center" width="100">
                                    <template slot-scope="scope">
                                      <div class="merge">
                                        <div>
                                          {{ scope.row.num }}次
                                        </div>
                                      </div>
                                    </template>
                                  </el-table-column>
                                </el-table>
                                <div style="margin-top: 5px;">
                                  **因有可能存在共同申请、共同作为权利人的情况，所以在数据统计时会出现非本区域内的企业，敬请知悉
                                </div>
                                <div class="more" @click="moreList('one_json', 'table2')"
                                  v-if="lawData.one_json.table2.length > 10 && !PdfType">
                                  查看全部
                                  >
                                </div>
                                <div v-if="lawData.one_json.table2.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>
                              </div>
                            </div>
                            <div v-if="item3_.id == 20">

                              <div class="textTitle titleSmallSize" :id="item3_.id" :ref="'BOX' + item3_.id">

                                <div class="titleSmallSize1">3. 新授权实外观设计专利申请人清单（共<span class="number">{{
                                  lawData.one_json.table3_num
                                }}</span>家）：</div>
                              </div>
                              <div class="table table1" v-if="lawData.one_json.table3.length">
                                <table v-if="PdfType" border="1">
                                  <tr>
                                    <th align="center"></th>
                                    <th align="center">走访情况</th>
                                    <th align="center">申请人</th>
                                    <th align="center">专利数量</th>
                                    <th align="center">走访次数</th>
                                  </tr>
                                  <tr v-for="(item, index) in lawData.one_json.table3.slice(0, 10)"
                                    :key="'lawData.one_json.table3' + index">
                                    <td align="center">{{ item.rank }}</td>
                                    <td align="center">
                                      <div class="merge">
                                        <div>
                                          <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6">
                                            {{ item.tip }}
                                          </div>
                                          <div v-else class="red">
                                            {{ item.tip }}
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td align="center">{{ item.company }}</td>
                                    <td align="center">{{ item.apc_num }}</td>
                                    <td align="center">
                                      <div class="merge">
                                        <div>
                                          {{ item.num }}次
                                        </div>
                                      </div>
                                    </td>
                                  </tr>
                                </table>
                                <el-table border @row-click="tableclickName" v-else
                                  :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                                  :data="lawData.one_json.table3.slice(0, 10)" style="width: 100%">
                                  <el-table-column type="index" width="40" label="" align="center">
                                  </el-table-column>
                                  <el-table-column prop="company" width="100" label="走访情况" align="center">
                                    <template slot-scope="scope">
                                      <div class="merge">
                                        <div>
                                          <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                            {{ scope.row.tip }}
                                          </div>
                                          <div v-else class="red">
                                            {{ scope.row.tip }}
                                          </div>
                                        </div>
                                      </div>
                                    </template>
                                  </el-table-column>
                                  <el-table-column prop="company" label="申请人">
                                  </el-table-column>
                                  <el-table-column prop="apc_num" label="专利数量" align="center" width="100">
                                  </el-table-column>
                                  <el-table-column prop="num" label="走访次数" align="center" width="100">
                                    <template slot-scope="scope">
                                      <div class="merge">
                                        <div>
                                          {{ scope.row.num }}次
                                        </div>
                                      </div>
                                    </template>
                                  </el-table-column>
                                </el-table>
                                <div style="margin-top: 5px;">
                                  **因有可能存在共同申请、共同作为权利人的情况，所以在数据统计时会出现非本区域内的企业，敬请知悉
                                </div>
                                <div class="more" @click="moreList('one_json', 'table3')"
                                  v-if="lawData.one_json.table3.length > 10 && !PdfType">
                                  查看全部
                                  >
                                </div>
                                <div v-if="lawData.one_json.table3.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>
                              </div>
                            </div>

                          </div>

                        </div>
                      </div>

                      <div v-if="item3.id == 14">
                        <div class="title" :id="item3.id" :ref="'BOX' + item3.id">{{ item3.title
                        }}</div>
                        <div v-for="item3_ in item3.children" :key="item3_.id">
                          <div :id="item3_.id" :ref="'BOX' + item3_.id" class="textTitle titleSmallSize">

                            <div class="titleSmallSize1">1. PCT国际专利申请人清单（共<span class="number">{{
                              lawData.two_json.aps_four_num }}</span>家）</div>
                          </div>

                          <div class="textS">
                            <span>
                              在<span class="number">
                                <span>{{ timeFrame }}</span>

                              </span>，{{ reportData.region.back_name }}PCT专利公开量<span class="number">{{
                                lawData.two_json.pct_patent }}</span>件，涉及申请主体<span class="number">{{
    lawData.two_json.aps_four_num }}</span>个。
                            </span>

                          </div>

                          <div class="table table1" v-if="lawData.two_json.table_four.length">
                            <table v-if="PdfType" border="1">
                              <tr>
                                <th align="center"></th>
                                <th align="center">走访情况</th>
                                <th align="center">申请人</th>
                                <th align="center">PCT数量</th>
                                <th align="center">走访次数</th>
                              </tr>
                              <tr v-for="(item, index) in lawData.two_json.table_four.slice(0, 10)"
                                :key="'lawData.two_json.table_four' + index">
                                <td align="center">{{ item.rank }}</td>
                                <td align="center">
                                  <div class="merge">
                                    <div>
                                      <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6">
                                        {{ item.tip }}
                                      </div>
                                      <div v-else class="red">
                                        {{ item.tip }}
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td align="center">{{ item.company }}</td>
                                <td align="center">{{ item.apc_num }}</td>
                                <td align="center">
                                  <div class="merge">
                                    <div>
                                      {{ item.num }}次
                                    </div>
                                  </div>
                                </td>
                              </tr>
                            </table>
                            <el-table border @row-click="tableclickName" v-else
                              :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                              :data="lawData.two_json.table_four.slice(0, 10)" style="width: 100%">
                              <el-table-column type="index" width="40" label="" align="center">
                              </el-table-column>
                              <el-table-column prop="company" width="100" label="走访情况" align="center">
                                <template slot-scope="scope">
                                  <div class="merge">
                                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                      {{ scope.row.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ scope.row.tip }}
                                    </div>
                                  </div>
                                </template>
                              </el-table-column>
                              <el-table-column prop="company" label="申请人">
                              </el-table-column>
                              <el-table-column prop="apc_num" label="PCT数量" align="center" width="100">
                              </el-table-column>

                              <el-table-column prop="tip" label="走访次数" align="center" width="100">
                                <template slot-scope="scope">
                                  <div class="merge">
                                    <div>
                                      {{ scope.row.num }}次
                                    </div>
                                  </div>

                                </template>
                              </el-table-column>
                            </el-table>

                            <div class="more" @click="moreList('two_json', 'table_four')"
                              v-if="lawData.two_json.table_four.length > 10 && !PdfType">查看全部 ></div>
                            <div v-if="lawData.two_json.table_four.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>


                          </div>
                        </div>
                      </div>

                      <div v-if="item3.id == 15">
                        <div class="title" :id="item3.id" :ref="'BOX' + item3.id">{{ item3.title
                        }}</div>

                        <div class="textS">
                          <span>

                            <div style="margin-bottom: 0;">

                              在<span class="number"> <span>{{ timeFrame }}</span>
                              </span>，{{ reportData.region.back_name }}质押融资生效专利数量<span class="number">{{
                                lawData.three_json.three_num }}</span>件
                              <span>
                                ，
                                其中，质押类型<span class="number">{{ lawData.three_json.preserve }}</span>个
                                ，保全类型<span class="number">{{ lawData.three_json.pledge }}</span>个。
                              </span>
                            </div>


                            <div style="margin-bottom: 0;">
                              <span v-if="lawData.three_json.preserve">
                                针对质押类型的<span class="number">{{ lawData.three_json.preserve }}</span>件专利，
                                <span v-if="three_jsonEcharts[0].value">
                                  发明专利
                                  <span class="number">{{ three_jsonEcharts[0].value }}</span>
                                  件，占比
                                  <span class="number">{{ ((three_jsonEcharts[0].value / three_jsonEchartsNum) * 100 +
                                    '').slice(0, 5) }}</span>
                                  %；
                                </span>
                                <span v-if="three_jsonEcharts[1].value">
                                  实用新型专利<span class="number">{{ three_jsonEcharts[1].value }}</span>件，
                                  占比<span class="number">{{ ((three_jsonEcharts[1].value / three_jsonEchartsNum) * 100 +
                                    '').slice(0, 5) }}</span>%；
                                </span>
                                <span v-if="three_jsonEcharts[2].value">
                                  外观设计专利<span class="number">{{ three_jsonEcharts[2].value }}</span>件，
                                  占比<span class="number">{{ ((three_jsonEcharts[2].value / three_jsonEchartsNum) * 100 +
                                    '').slice(0, 5) }}</span>%。
                                </span>
                              </span>
                            </div>
                          </span>
                        </div>
                        <div v-if="!PdfType">
                          <div v-if="lawData.three_json.preserve && lawData.three_json.preserve_arr.length > 1"
                            ref="pie_low3" style="height: 300px;width:100%"></div>
                        </div>
                        <div v-if="PdfType && evaluationInfo.pie_low3" style="margin-left: 32px;">
                          <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                            :src="evaluationInfo.pie_low3">
                        </div>

                        <div class="textS">
                          <span>
                            针对保全类型的<span class="number">{{ lawData.three_json.pledge }}</span>件专利，

                            <span v-for="item in lawData.three_json.pledge_arr" :key="item.name">
                              {{ item.name }} <span class="number">{{
                                item.value }}</span> 件，占比 <span class="number">{{
    ((item.value / lawData.three_json.pledge) * 100 + '').slice(0,
      5)
  }}</span> %；
                            </span>
                          </span>
                        </div>

                        <div v-if="!PdfType">
                          <div v-if="lawData.three_json.pledge && lawData.three_json.pledge_arr.length > 1" ref="pie_low6"
                            style="height: 300px;width:100%"></div>
                        </div>
                        <div v-if="PdfType && evaluationInfo.pie_low6" style="margin-left: 32px;">
                          <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                            :src="evaluationInfo.pie_low6">
                        </div>

                        <div :id="item3.children[0].id" :ref="'BOX' + item3.children[0].id"
                          class="textTitle titleSmallSize">

                          <div class="titleSmallSize1">1. 涉质押融资专利的创新主体清单（共<span class="number">{{
                            lawData.three_json.table_preserve_three_num }}</span>家）：</div>
                        </div>


                        <div class="table table1">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">走访情况</th>
                              <th align="center">申请人</th>
                              <th align="center">专利质押数量</th>
                              <th align="center">走访次数</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.three_json.table_preserve_three.slice(0, 10)"
                              :key="'lawData.three_json.table_preserve_three' + index">
                              <td align="center">{{ item.rank }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6">
                                      {{ item.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ item.tip }}
                                    </div>
                                  </div>
                                </div>
                              </td>
                              <td align="center">{{ item.company }}</td>
                              <td align="center">{{ item.apc_num }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    {{ item.num }}次
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </table>
                          <el-table border @row-click="tableclickName" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.three_json.table_preserve_three.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column prop="company" width="100" label="走访情况" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                      {{ scope.row.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ scope.row.tip }}
                                    </div>
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="company" label="申请人">
                            </el-table-column>
                            <el-table-column prop="apc_num" label="专利质押数量" align="center">
                            </el-table-column>
                            <el-table-column prop="tip" label="走访次数" align="center" width="160">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.num }}次
                                  </div>
                                </div>

                              </template>
                            </el-table-column>
                          </el-table>
                          <div class="more" @click="moreList('three_json', 'table_preserve_three')"
                            v-if="lawData.three_json.table_preserve_three.length > 10 && !PdfType">查看全部 ></div>
                          <div v-if="lawData.three_json.table_preserve_three.length > 10 && PdfType"
                            style="margin-top: 5px;">**以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                        </div>

                        <div class="textTitle titleSmallSize" :id="item3.children[1].id"
                          :ref="'BOX' + item3.children[1].id">
                          <div class="titleSmallSize1">2. 涉保全专利的创新主体清单（共<span class="number">{{
                            lawData.three_json.table_pledge_three_num }}</span>家）：</div>
                        </div>

                        <div class="table table1" v-if="lawData.three_json.table_pledge_three.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">走访情况</th>
                              <th align="center">申请人</th>
                              <th align="center">保全专利量</th>
                              <th align="center">走访次数</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.three_json.table_pledge_three.slice(0, 10)"
                              :key="'lawData.three_json.table_pledge_three' + index">
                              <td align="center">{{ item.rank }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6">
                                      {{ item.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ item.tip }}
                                    </div>
                                  </div>
                                </div>
                              </td>
                              <td align="center">{{ item.company }}</td>
                              <td align="center">{{ item.apc_num }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    {{ item.num }}次
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </table>
                          <el-table border @row-click="tableclickName" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.three_json.table_pledge_three.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column prop="company" width="100" label="走访情况" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                      {{ scope.row.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ scope.row.tip }}
                                    </div>
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="company" label="申请人">
                            </el-table-column>
                            <el-table-column prop="apc_num" label="保全专利量" align="center">
                            </el-table-column>
                            <el-table-column prop="tip" label="走访次数" align="center" width="160">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.num }}次
                                  </div>
                                </div>

                              </template>
                            </el-table-column>
                          </el-table>
                          <div class="more" @click="moreList('three_json', 'table_pledge_three')"
                            v-if="lawData.three_json.table_pledge_three.length > 10 && !PdfType">查看全部 ></div>
                          <div v-if="lawData.three_json.table_pledge_three.length > 10 && PdfType"
                            style="margin-top: 5px;">**以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                        </div>
                      </div>

                      <div v-if="item3.id == 16">
                        <div class="title" :id="item3.id" :ref="'BOX' + item3.id">{{ item3.title
                        }}</div>
                        <div class="textS">
                          <span>
                            <span>
                              在<span class="number"> <span>{{ timeFrame }}</span>
                              </span>，{{ reportData.region.back_name }}共发生转让的专利数量<span class="number">{{
                                lawData.four_json.four_num }}</span>件，其中，发明专利 <span class="number">{{
    lawData.four_json.patent_num }}</span> 件，占比 <span class="number">{{
    lawData.four_json.patent_num_rate }}%</span>；实用新型
                              专利<span class="number">{{ lawData.four_json.new_num }}</span>件，占比<span class="number">{{
                                lawData.four_json.new_num_rate }}%</span>；外观设计专利<span class="number">{{
    lawData.four_json.app_num }}</span>件，占比<span class="number">{{
    lawData.four_json.app_num_rate }}%</span>。
                            </span>
                          </span>

                        </div>

                        <div v-if="!PdfType">
                          <div v-if="lawData.four_json.four_num && lawData.four_json.cake_one_arr.length > 1"
                            ref="pie_low4" style="height: 300px;width:100%"></div>
                        </div>
                        <div v-if="PdfType && evaluationInfo.pie_low4" style="margin-left: 32px;">
                          <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                            :src="evaluationInfo.pie_low4">
                        </div>

                        <div class="textS">
                          <span>
                            <div style="margin-bottom: 0;">

                              其中，以{{ reportData.region.back_name }}企业作为受让人的专利量为<span class="number">{{
                                lawData.four_json.two_num }}</span>件，其对应的专利申请人类型分别为企业、科研院所（学校）、机关团体、个人等。
                            </div>

                            <div style="margin-bottom: 0;">
                              <span v-if="lawData.four_json.two_num">
                                申请人为企业的<span class="number">{{ lawData.four_json.cake_two_arr[0].value }}</span>件，占比<span
                                  class="number">
                                  {{ Math.round(((lawData.four_json.cake_two_arr[0].value /
                                    (lawData.four_json.cake_two_arr[0].value + lawData.four_json.cake_two_arr[1].value +
                                      lawData.four_json.cake_two_arr[2].value)) * 100) * 100) / 100 }}</span>%；
                                申请人为个人的的<span class="number">{{ lawData.four_json.cake_two_arr[2].value }}</span>件，占比<span
                                  class="number">{{ Math.round(((lawData.four_json.cake_two_arr[2].value /
                                    (lawData.four_json.cake_two_arr[0].value + lawData.four_json.cake_two_arr[1].value +
                                      lawData.four_json.cake_two_arr[2].value)) * 100) * 100) / 100 }}</span>%；
                                申请人为科研院校的的<span class="number">{{ lawData.four_json.cake_two_arr[1].value
                                }}</span>件，占比<span class="number">{{
  Math.round(((lawData.four_json.cake_two_arr[1].value /
    (lawData.four_json.cake_two_arr[0].value + lawData.four_json.cake_two_arr[1].value +
      lawData.four_json.cake_two_arr[2].value)) * 100) * 100) / 100 }}</span>%；
                              </span>
                            </div>
                          </span>
                        </div>
                        <div v-if="!PdfType">
                          <div v-if="lawData.four_json.four_num && lawData.four_json.cake_two_arr.length > 1"
                            ref="pie_low7" style="height: 300px;width:100%"></div>
                        </div>
                        <div v-if="PdfType && evaluationInfo.pie_low7" style="margin-left: 32px;">
                          <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                            :src="evaluationInfo.pie_low7">
                        </div>
                        <div :id="item3.children[0].id" :ref="'BOX' + item3.children[0].id" style="margin-top: 50px;"
                          class="textTitle titleSmallSize">

                          <div class="titleSmallSize1">1. “企业-企业”受让专利分析</div>
                        </div>

                        <div class="textS" style="margin-top: 30px;">
                          <div>
                            由企业转让至区域内企业的专利清单（共<span class="number">{{ lawData.four_json.cake_two_arr[0].value }}</span>件）
                          </div>
                        </div>

                        <div class="table table1" v-if="lawData.four_json.two_company_arr.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">专利标题</th>
                              <th align="center">申请人</th>
                              <th align="center">公开号/公开日/转让日</th>
                              <th align="center">变更后权利人</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.four_json.two_company_arr.slice(0, 10)"
                              :key="'lawData.four_json.two_company_arr' + index">
                              <td align="center">{{ index + 1 }}</td>
                              <td align="center">{{ item.tio }}</td>
                              <td align="center">{{ item.apo }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    {{ item.pno }}
                                  </div>
                                  <div>
                                    {{ item.pd ? item.pd.slice(0, 10) : '' }}
                                  </div>
                                  <div>
                                    {{ item.edd ? item.edd.slice(0, 10) : '' }}
                                  </div>
                                </div>
                              </td>
                              <td align="center">
                                <div v-for="item1 in item.aasc.split(';')">
                                  {{ item1 }};
                                </div>
                              </td>

                            </tr>
                          </table>
                          <el-table border @row-click="rowClick" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.four_json.two_company_arr.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column prop="tio" label="专利标题" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.tio }}
                                  </div>
                                </div>
                              </template>
                            </el-table-column>

                            <el-table-column prop="apo" label="申请人">
                            </el-table-column>
                            <el-table-column prop="pno" label="公开号/公开日/转让日">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.pno }}
                                  </div>
                                  <div>
                                    {{ scope.row.pd ? scope.row.pd.slice(0, 10) : '' }}
                                  </div>
                                  <div>
                                    {{ scope.row.edd ? scope.row.edd.slice(0, 10) : '' }}
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="aasc" label="变更后权利人">
                              <template slot-scope="scope">
                                <div v-for="item in scope.row.aasc.split(';')">
                                  {{ item }};
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>

                          <div class="download">
                            <div class="textS" style="margin-top: 10px;">
                            </div>
                            <div class="more" @click="moreList('four_json', 'two_company_arr')"
                              v-if="lawData.four_json.two_company_arr.length > 10 && !PdfType">查看全部 >
                            </div>
                            <div v-if="lawData.four_json.two_company_arr.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                          </div>

                        </div>

                        <div class="textS">
                          <span>
                            <div style="margin-top: 20px;">

                              经统计、归类，<span class="number">{{ lawData.four_json.cake_two_arr[0].value
                              }}</span>件“企业转让至企业”的专利共计转让给<span class="number">{{ lawData.four_json.company_two_arr_num
}}</span>家{{ reportData.region.back_name }}企业。
                            </div>
                            <div style="margin-bottom: 0;" v-if="lawData.four_json.company_two_arr.length > 2">
                              其中，排名前三的分别是：<div style="margin-bottom: 0;"
                                v-for="item in lawData.four_json.company_two_arr.slice(0, 3)">{{
                                  item.company
                                }}共<span class="number">{{ item.apc_num }}</span>件；</div>
                            </div>
                          </span>
                        </div>

                        <div class="table table1" v-if="lawData.four_json.company_two_arr.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">走访情况/走访次数</th>
                              <th align="center">变更后权利人</th>
                              <th align="center">涉及专利量</th>
                              <th align="center">具体详情</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.four_json.company_two_arr.slice(0, 10)"
                              :key="'lawData.four_json.company_two_arr' + index">
                              <td align="center">{{ item.rank }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6">
                                      {{ item.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ item.tip }}
                                    </div>
                                  </div>
                                  <div>
                                    {{ item.num }}次
                                  </div>
                                </div>
                              </td>
                              <td align="center">{{ item.company }}</td>
                              <td align="center">{{ item.apc_num }}</td>
                              <td align="center">
                                <div v-for="(item1, index1)  in item.list_info">
                                  {{ index1 }}({{ item1 }})；
                                </div>
                              </td>

                            </tr>
                          </table>
                          <el-table border @row-click="tableclickName" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.four_json.company_two_arr.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column width="100" label="走访情况/走访次数" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                      {{ scope.row.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ scope.row.tip }}
                                    </div>
                                  </div>
                                  <div>
                                    {{ scope.row.num }}次
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="company" label="变更后权利人">
                            </el-table-column>
                            <el-table-column prop="apc_num" label="涉及专利量" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="list_info" label="具体详情">
                              <template slot-scope="scope">
                                <div v-for="(item, index)  in scope.row.list_info">
                                  {{ index }}({{ item }})；
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>
                          <div style="margin-top: 5px;margin-bottom: 0px;">
                            **因有可能存在共同申请、共同作为权利人的情况，所以在数据统计时会出现非本区域内的企业，敬请知悉
                          </div>
                          <div class="download">
                            <div class="textS" style="margin-top: 10px;">
                            </div>
                            <div class="more" @click="moreList('four_json', 'company_two_arr')"
                              v-if="lawData.four_json.company_two_arr.length > 10 && !PdfType">查看全部 >
                            </div>
                            <div v-if="lawData.four_json.company_two_arr.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                          </div>
                        </div>

                        <div style="margin-top: 50px;" :id="item3.children[1].id" :ref="'BOX' + item3.children[1].id"
                          class="textTitle titleSmallSize">

                          <div class="titleSmallSize1">2. “个人-企业”受让专利分析</div>
                        </div>

                        <div class="textS" style="margin-top: 30px;">
                          <div>
                            由个人转让至区域内企业的专利清单（共<span class="number">{{ lawData.four_json.cake_two_arr[2].value }}</span>件）
                          </div>
                        </div>



                        <div class="table table1" v-if="lawData.four_json.two_person_arr.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">专利标题</th>
                              <th align="center">申请人</th>
                              <th align="center">公开号/公开日/转让日</th>
                              <th align="center">变更后权利人</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.four_json.two_person_arr.slice(0, 10)"
                              :key="'lawData.four_json.two_person_arr' + index">
                              <td align="center">{{ index + 1 }}</td>
                              <td align="center">{{ item.tio }}</td>
                              <td align="center">{{ item.apo }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    {{ item.pno }}
                                  </div>
                                  <div>
                                    {{ item.pd ? item.pd.slice(0, 10) : '' }}
                                  </div>
                                  <div>
                                    {{ item.edd ? item.edd.slice(0, 10) : '' }}
                                  </div>
                                </div>
                              </td>
                              <td align="center">
                                <div v-for="item1 in item.aasc.split(';')">
                                  {{ item1 }};
                                </div>
                              </td>

                            </tr>
                          </table>
                          <el-table border @row-click="rowClick" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.four_json.two_person_arr.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column prop="tio" label="专利标题" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.tio }}
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="apo" label="申请人">
                            </el-table-column>
                            <el-table-column prop="pno" label="公开号/公开日/转让日">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.pno }}
                                  </div>
                                  <div>
                                    {{ scope.row.pd ? scope.row.pd.slice(0, 10) : '' }}
                                  </div>
                                  <div>
                                    {{ scope.row.edd ? scope.row.edd.slice(0, 10) : '' }}
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="aasc" label="变更后权利人">
                              <template slot-scope="scope">
                                <div v-for="item in scope.row.aasc.split(';')">
                                  {{ item }};
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>

                          <div class="download">
                            <div class="textS" style="margin-top: 10px;">
                            </div>
                            <div class="more" @click="moreList('four_json', 'two_person_arr')"
                              v-if="lawData.four_json.two_person_arr.length > 10 && !PdfType">查看全部 >
                            </div>
                            <div v-if="lawData.four_json.two_person_arr.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                          </div>
                        </div>

                        <div class="textS">
                          <span>
                            <div style="margin-top: 20px;">
                              经统计、归类，<span class="number">{{ lawData.four_json.cake_two_arr[2].value
                              }}</span>件“个人转让至企业”的专利共计转让给<span class="number">{{
  lawData.four_json.person_two_arr_num }}</span>家{{ reportData.region.back_name }}企业。

                              <div style="margin: 0;" v-if="lawData.four_json.person_two_arr.length > 2">
                                其中，排名前三的分别是：<div style="margin: 0;"
                                  v-for="item in lawData.four_json.person_two_arr.slice(0, 3)">{{
                                    item.company
                                  }}共<span class="number">{{ item.apc_num }}</span>件；</div>
                              </div>
                            </div>
                          </span>

                        </div>

                        <div class="table table1" v-if="lawData.four_json.person_two_arr.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">走访情况/走访次数</th>
                              <th align="center">变更后权利人</th>
                              <th align="center">涉及专利量</th>
                              <th align="center">具体详情</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.four_json.person_two_arr.slice(0, 10)"
                              :key="'lawData.four_json.person_two_arr' + index">
                              <td align="center">{{ item.rank }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6">
                                      {{ item.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ item.tip }}
                                    </div>
                                  </div>
                                  <div>
                                    {{ item.num }}次
                                  </div>
                                </div>
                              </td>
                              <td align="center">{{ item.company }}</td>
                              <td align="center">{{ item.apc_num }}</td>
                              <td align="center">
                                <div v-for="(item1, index1)  in item.list_info">
                                  {{ index1 }}({{ item1 }})；
                                </div>
                              </td>
                            </tr>
                          </table>
                          <el-table border @row-click="tableclickName" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.four_json.person_two_arr.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column width="100" label="走访情况/走访次数" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                      {{ scope.row.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ scope.row.tip }}
                                    </div>
                                  </div>
                                  <div>
                                    {{ scope.row.num }}次
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="company" label="变更后权利人">
                            </el-table-column>
                            <el-table-column prop="apc_num" label="涉及专利量" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="list_info" label="具体详情">
                              <template slot-scope="scope">
                                <div v-for="(item, index)  in scope.row.list_info">
                                  {{ index }}({{ item }})；
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>
                          <div style="margin-top: 5px;margin-bottom: 0px;">
                            **因有可能存在共同申请、共同作为权利人的情况，所以在数据统计时会出现非本区域内的企业，敬请知悉
                          </div>

                          <div class="download">
                            <div class="textS" style="margin-top: 10px;">
                            </div>
                            <div class="more" @click="moreList('four_json', 'person_two_arr')"
                              v-if="lawData.four_json.person_two_arr.length > 10 && !PdfType">查看全部 >
                            </div>
                            <div v-if="lawData.four_json.person_two_arr.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                          </div>
                        </div>

                        <div style="margin-top: 50px;" class="textTitle titleSmallSize" :id="item3.children[2].id"
                          :ref="'BOX' + item3.children[2].id">

                          <div class="titleSmallSize1">3. “科研院所-企业”受让专利分析</div>
                        </div>

                        <div class="textS" style="margin-top: 30px;">
                          <span>
                            由科研院校转让至区域内企业的专利清单（共<span class="number">{{ lawData.four_json.cake_two_arr[1].value
                            }}</span>件）
                          </span>
                        </div>

                        <div class="table table1" v-if="lawData.four_json.two_school_arr.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">专利标题</th>
                              <th align="center">申请人</th>
                              <th align="center">公开号/公开日/转让日</th>
                              <th align="center">变更后权利人</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.four_json.two_school_arr.slice(0, 10)"
                              :key="'lawData.four_json.two_school_arr' + index">
                              <td align="center">{{ index + 1 }}</td>
                              <td align="center">{{ item.tio }}</td>
                              <td align="center">{{ item.apo }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    {{ item.pno }}
                                  </div>
                                  <div>
                                    {{ item.pd ? item.pd.slice(0, 10) : '' }}
                                  </div>
                                  <div>
                                    {{ item.edd ? item.edd.slice(0, 10) : '' }}
                                  </div>
                                </div>
                              </td>
                              <td align="center">
                                <div v-for="item1 in item.aasc.split(';')">
                                  {{ item1 }};
                                </div>
                              </td>

                            </tr>
                          </table>
                          <el-table border @row-click="rowClick" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.four_json.two_school_arr.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column prop="tio" label="专利标题" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.tio }}
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="apo" label="申请人">
                            </el-table-column>
                            <el-table-column prop="pno" label="公开号/公开日/转让日">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.pno }}
                                  </div>
                                  <div>
                                    {{ scope.row.pd ? scope.row.pd.slice(0, 10) : '' }}
                                  </div>
                                  <div>
                                    {{ scope.row.edd ? scope.row.edd.slice(0, 10) : '' }}
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="aasc" label="变更后权利人">
                              <template slot-scope="scope">
                                <div v-for="item in scope.row.aasc.split(';')">
                                  {{ item }};
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>

                          <div class="download">
                            <div class="textS" style="margin-top: 10px;">
                            </div>
                            <div class="more" @click="moreList('four_json', 'two_school_arr')"
                              v-if="lawData.four_json.two_school_arr.length > 10 && !PdfType">查看全部 >
                            </div>
                            <div v-if="lawData.four_json.two_school_arr.length > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                          </div>
                        </div>

                        <div style="margin-top: 50px;" class="textTitle titleSmallSize"
                          v-if="lawData.three_json.table_preserve_three_num">
                          <div class="titleSmallSize1">4. 科研院校转让专利至区域创新主体的排名</div>
                        </div>

                        <div class="textS">
                          <span>
                            <div style="margin-top: 20px;">
                              经统计、归类，<span class="number">{{ lawData.four_json.cake_two_arr[1].value
                              }}</span>件“科研院校转让至企业”的专利共计转让给<span class="number">{{
  lawData.four_json.school_two_aspc_arr_num }}</span>家{{ reportData.region.back_name }}企业。

                              <div style="margin: 0;" v-if="lawData.four_json.school_two_aspc_arr.length > 2">
                                其中，排名前三的分别是：<div style="margin: 0;"
                                  v-for="item in lawData.four_json.school_two_aspc_arr.slice(0, 3)">{{
                                    item.company
                                  }}共<span class="number">{{ item.apc_num }}</span>件；</div>
                              </div>
                            </div>
                          </span>
                        </div>

                        <div class="table table1" v-if="lawData.four_json.school_two_aspc_arr.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">走访情况/走访次数</th>
                              <th align="center">变更后权利人</th>
                              <th align="center">涉及专利量</th>
                              <th align="center">具体详情</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.four_json.school_two_aspc_arr.slice(0, 10)"
                              :key="'lawData.four_json.school_two_aspc_arr' + index">
                              <td align="center">{{ item.rank }}</td>
                              <td align="center">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="item.tip == '已走访'" style="color: #4e81f6">
                                      {{ item.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ item.tip }}
                                    </div>
                                  </div>
                                  <div>
                                    {{ item.num }}次
                                  </div>
                                </div>
                              </td>
                              <td align="center">{{ item.company }}</td>
                              <td align="center">{{ item.apc_num }}</td>
                              <td align="center">
                                <div v-for="(item1, index1)  in item.list_info">
                                  {{ index1 }}({{ item1 }})；
                                </div>
                              </td>
                            </tr>
                          </table>
                          <el-table border @row-click="tableclickName" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.four_json.school_two_aspc_arr.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column width="100" label="走访情况/走访次数" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                                      {{ scope.row.tip }}
                                    </div>
                                    <div v-else class="red">
                                      {{ scope.row.tip }}
                                    </div>
                                  </div>
                                  <div>
                                    {{ scope.row.num }}次
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="company" label="变更后权利人">
                            </el-table-column>
                            <el-table-column prop="apc_num" label="涉及专利量" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="list_info" label="具体详情">
                              <template slot-scope="scope">
                                <div v-for="(item, index)  in scope.row.list_info">
                                  {{ index }}({{ item }})；
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>
                          <div style="margin-top: 5px;margin-bottom: 0px;">
                            **因有可能存在共同申请、共同作为权利人的情况，所以在数据统计时会出现非本区域内的企业，敬请知悉
                          </div>
                          <div class="download">
                            <div class="textS" style="margin-top: 10px;">
                            </div>
                            <div class="more" @click="moreList('four_json', 'school_two_aspc_arr')"
                              v-if="lawData.four_json.school_two_aspc_arr.length > 10 && !PdfType">查看全部 >
                            </div>
                            <div v-if="lawData.four_json.school_two_aspc_arr.length > 10 && PdfType"
                              style="margin-top: 5px;">**以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                          </div>
                        </div>


                        <div class="textS" style="margin-top: 20px;">
                          <span>
                            <div style="margin-top: 20px;">
                              此外，通过进一步分析，可知“科研院校转让至企业”的专利所对应的申请人共涉及<span class="number">{{
                                lawData.four_json.school_two_apc_arr_num }}</span>个科研院所（学校）。
                              <div style="margin: 0;" v-if="lawData.four_json.school_two_apc_arr.length > 2">
                                其中，排名前三的分别是：<div style="margin: 0;"
                                  v-for="item in lawData.four_json.school_two_apc_arr.slice(0, 3)">{{
                                    item.company
                                  }}共<span class="number">{{ item.apc_num }}</span>件；</div>
                              </div>
                            </div>
                          </span>

                        </div>

                        <div class="table table1" v-if="lawData.four_json.school_two_apc_arr.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">涉及专利量</th>
                              <th align="center">申请人</th>
                              <th align="center">变更后权利人及其受让数量</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.four_json.school_two_apc_arr.slice(0, 10)"
                              :key="'lawData.four_json.school_two_apc_arr' + index">
                              <td align="center">{{ item.rank }}</td>
                              <td align="center">{{ item.apc_num }}</td>
                              <td align="center">{{ item.company }}</td>
                              <td align="center">
                                <div v-for="(item1, index1)  in item.list_info">
                                  {{ index1 }}({{ item1 }})；
                                </div>
                              </td>
                            </tr>
                          </table>
                          <el-table border @row-click="tableclickName" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.four_json.school_two_apc_arr.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column prop="apc_num" label="涉及专利量" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="company" label="申请人">
                            </el-table-column>
                            <el-table-column prop="list_info" label="变更后权利人及其受让数量">
                              <template slot-scope="scope">
                                <div v-for="(item, index)  in scope.row.list_info">
                                  {{ index }}({{ item }})；
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>
                          <div style="margin-top: 5px;margin-bottom: 0px;">
                            **因有可能存在共同申请、共同作为权利人的情况，所以在数据统计时会出现非本区域内的企业，敬请知悉
                          </div>
                          <div class="download">
                            <div class="textS" style="margin-top: 10px;">
                            </div>
                            <div class="more" @click="moreList('four_json', 'school_two_apc_arr')"
                              v-if="lawData.four_json.school_two_apc_arr.length > 10 && !PdfType">查看全部 >
                            </div>
                            <div v-if="lawData.four_json.school_two_apc_arr.length > 10 && PdfType"
                              style="margin-top: 5px;">**以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                          </div>
                        </div>

                        <div style="margin-top: 50px;" class="textTitle titleSmallSize"
                          v-if="lawData.three_json.table_preserve_three_num">
                          <div class="titleSmallSize1">5. 涉科研院校转让专利至区域内创新主体的发明人排名</div>

                        </div>

                        <div class="textS">
                          <span>
                            <div style="margin-top: 20px;">
                              同时，“科研院校转让至企业”的专利所对应的发明人共<span class="number">{{
                                lawData.four_json.school_two_inc_arr_num }}</span>名。
                              <div style="margin: 0;" v-if="lawData.four_json.school_two_inc_arr.length > 2">
                                其中，排名前三的分别是：<div style="margin: 0;"
                                  v-for="item in lawData.four_json.school_two_inc_arr.slice(0, 3)">{{
                                    item.company
                                  }}共<span class="number">{{ item.apc_num }}</span>件；</div>
                              </div>
                            </div>
                          </span>
                        </div>


                        <div class="table table1" v-if="lawData.four_json.school_two_inc_arr.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">涉及专利量</th>
                              <th align="center">发明人</th>
                              <th align="center">变更后权利人及其受让数量</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.four_json.school_two_inc_arr.slice(0, 10)"
                              :key="'lawData.four_json.school_two_inc_arr' + index">
                              <td align="center">{{ item.rank }}</td>
                              <td align="center">{{ item.apc_num }}</td>
                              <td align="center">{{ item.company }}</td>
                              <td align="center">
                                <div v-for="(item1, index1)  in item.list_info">
                                  {{ index1 }}({{ item1 }})；
                                </div>
                              </td>
                            </tr>
                          </table>
                          <el-table border @row-click="tableclickName" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.four_json.school_two_inc_arr.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column prop="apc_num" label="涉及专利量" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="company" label="发明人">
                            </el-table-column>
                            <el-table-column prop="list_info" label="变更后权利人及其受让数量">
                              <template slot-scope="scope">
                                <div v-for="(item, index)  in scope.row.list_info">
                                  {{ index }}({{ item }})；
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>

                          <div class="download">
                            <div class="textS" style="margin-top: 10px;">
                            </div>
                            <div class="more" @click="moreList('four_json', 'school_two_inc_arr')"
                              v-if="lawData.four_json.school_two_inc_arr > 10 && !PdfType">查看全部 >
                            </div>
                            <div v-if="lawData.four_json.school_two_inc_arr > 10 && PdfType" style="margin-top: 5px;">
                              **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                          </div>
                        </div>
                      </div>

                      <div v-if="item3.id == 17">
                        <div class="title" :id="item3.id" :ref="'BOX' + item3.id">{{ item3.title
                        }}</div>

                        <div :id="item3.children[0].id" :ref="'BOX' + item3.children[0].id"
                          class="textTitle titleSmallSize">

                          <div class="titleSmallSize1">1. 知识产权诉讼清单（共<span class="number">{{
                            lawData.five_json.six_count
                          }}</span>家）</div>
                        </div>
                        <div class="textS">
                          <span>
                            <div style="margin: 0;">
                              在<span class="number"> <span>{{ timeFrame }}</span>
                              </span>，{{ reportData.region.back_name }}共发生诉讼数量<span class="number">{{
                                lawData.five_json.six_count
                              }}</span>件
                            </div>

                            <div style="margin: 0;">
                              备注：关于知识产权诉讼仅统计<span class="number"> <span>{{ timeFrame }}</span>
                              </span>期间，相关数据略有延后，仅供参考。
                            </div>

                          </span>
                        </div>

                        <div v-if="!PdfType">
                          <div v-if="lawData.five_json.six_count && lawData.five_json.column_key_arr.length > 1"
                            ref="pie_low5" style="height: 300px;width:100%"></div>
                        </div>
                        <div v-if="PdfType && evaluationInfo.pie_low5" style="margin-left: 32px;">
                          <img width="576" height="270" style="object-fit: contain;text-align: center;margin: 0 auto;"
                            :src="evaluationInfo.pie_low5">
                        </div>

                        <div v-if="lawData.five_json.six_list.length" :class="PdfType ? 'titleSmallSize2' : 'title titleSmall titleSmallSize'">诉讼清单</div>

                        <div class="table table1" v-if="lawData.five_json.six_list.length">
                          <table v-if="PdfType" border="1">
                            <tr>
                              <th align="center"></th>
                              <th align="center">标题原文</th>
                              <th align="center">上诉人</th>
                              <th align="center">案件类型</th>
                              <th align="center">判决日</th>
                              <th align="center">案号</th>
                            </tr>
                            <tr v-for="(item, index) in lawData.five_json.six_list.slice(0, 10)"
                              :key="'lawData.five_json.six_list' + index">
                              <td align="center">{{ index + 1 }}</td>
                              <td align="center">{{ item.ctio }}</td>
                              <td align="center">{{ item.plo }}</td>
                              <td align="center">{{ item.ct }}</td>
                              <td align="center">
                                <div>
                                  {{ item.cjd ? item.cjd.slice(0, 10) : '' }}
                                </div>
                              </td>
                              <td align="center">{{ item.cdn }}</td>
                            </tr>
                          </table>
                          <el-table border @row-click="see" v-else
                            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
                            :data="lawData.five_json.six_list.slice(0, 10)" style="width: 100%">
                            <el-table-column type="index" width="40" label="" align="center">
                            </el-table-column>
                            <el-table-column prop="ctio" label="标题原文" align="center">
                            </el-table-column>
                            <el-table-column prop="plo" label="上诉人" align="center">
                            </el-table-column>
                            <el-table-column prop="ct" label="案件类型" align="center">
                            </el-table-column>
                            <el-table-column prop="cjd" label="判决日" align="center">
                              <template slot-scope="scope">
                                <div class="merge">
                                  <div>
                                    {{ scope.row.cjd ? scope.row.cjd.slice(0, 10) : '' }}
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="cdn" label="案号" align="center">
                            </el-table-column>
                          </el-table>

                          <div class="more" @click="moreList('five_json', 'six_list')"
                            v-if="lawData.five_json.six_list.length > 10 && !PdfType">查看全部 ></div>
                          <div v-if="lawData.five_json.six_list.length > 10 && PdfType" style="margin-top: 5px;">
                            **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）</div>

                        </div>
                        <div>数据更新时间:{{ allData.update_time ? allData.update_time.slice(0, 10) : '暂未更新' }} <span
                            v-if="!PdfType" @click="updateIso"
                            style="cursor: pointer;margin-left: 10px;color: #4e81f6;">马上更新</span></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <Menu ref="elTree" :menu="menuList" :nodeKey="nodeKey" @NodeClick="NodeClick"></Menu>

    </el-main>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { htmlPdf } from "@/utils/pdf.js";
import { getPDF } from "@/utils/pdf2.0.js";
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';
import {
  reportInfo,
  getReportData,
  getMonth,
  updateIso,
  getleftlist,
  center,
  getCompanyId,
  getReportMenu,
} from "@/api/newuser";
import Menu from "./menu";
import CountTo from 'vue-count-to'
import { VUE_APP_BASE_API } from "@/config";
import {
  upload
} from "@/api/configApi";

export default {
  data() {
    return {
      loadPdfType: false,
      arr: ["日期",
        "类型",
        "用户数",
        "累计活跃用户",
        "累计活跃率",
        "数据日期",
        "数据更新时间"],
      datas: [
        {
          "日期": "日期",
          "类型": "内部用户",
          "用户数": "用户数",
          "累计活跃用户": "累计活跃用户",
          "累计活跃率": "累计活跃率",
          "数据日期": '数据日期',
          "数据更新时间": '数据更新时间数据更新时间数据更新时间数据更新时间数据更新时间'
        },
        {

          "日期": "日期",
          "类型": "内部用户",
          "用户数": "用户数",
          "累计活跃用户": "累计活跃用户",
          "累计活跃率": "累计活跃率",
          "数据日期": '数据日期',
          "数据更新时间": '数据更新时间'
        }
      ],


      evaluationInfo: {

      },
      percentName: {
        发明: 'invent_ratio',
        实用新型: 'news_ratio',
        外观设计: 'apper_ratio'
      },
      rankingName: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
      nodeKey: 1,
      dimensions1: ['product', '上月数量', '本月数量', '去年同期'],
      PdfType: false,
      reportData: {

      },
      start_time: '2024-10-01',
      allData: {},
      lawData: {},
      tableData_one_arr: [],
      tableData_two_arr: [],
      tableData_three_arr: [],
      tableData_four_arr: [],
      tableData_five_arr: [],
      tableData_six_arr: [],
      tableData2: [],
      piecolor: ['#0496ff', '#09e3ff', '#0745eb', '#0494fd', '#fe836c', '#786ce0'],
      options: [],
      name_arr: [],
      organization_list: [],
      company_visit_arr: [],
      needToMergeColumns: ['name'],
      three_jsonEchartsNum: 0,
      three_jsonEcharts: [
        {
          name: '发明',
          value: 0,
          per: 0,
        },
        {
          name: '实用新型',
          value: 0,
          per: 0,
        },
        {
          name: '外观设计',
          value: 0,
          per: 0,
        }
      ],
      demandList: [
        {
          value: '国际申请',
          bgc: '#0297FE',
          Company: '例',
          Number: '0',
        },
        {
          value: '年度企业需求',
          bgc: '#02ECFF',
          Company: '例',
          Number: '0',
        },
        {
          value: '政策申请',
          bgc: '#0043FF',
          Company: '例',
          Number: '0',
        },
        {
          value: '专利侵权',
          bgc: '#016AFD',
          Company: '例',
          Number: '0',
        }
      ],
      role: [],
      roleData: false,
      changeList: {},
      menuList: [],
      menuOld: [],
      menuTrueId: [],
      observer: null,
    };
  },
  computed: {
    timeFrame() {
      if (this.PdfType) {
        return `据统计，在本时段内累计`
      }

      if (this.allData.date == this.allData.date_end) {
        return `${this.allData.date.split('-').join('年')}月`
      } else {
        return `${this.allData.date.split('-').join('年')}月至${this.allData.date_end.split('-').join('年')}月`
      }
    },
    oldtimeFrame() {
      if (this.allData.date == this.allData.date_end) {
        return `${this.allData.date.split('-').join('年')}月`
      } else {
        return `${this.allData.date.split('-').join('年')}月至${this.allData.date_end.split('-').join('年')}月`
      }
    }
  },
  watch: {},
  filters: {
    tt(data) {
      if (!data) {
        return "";
      }
      let str = "";
      let obj = {
        1: "申请权转移",
        2: "专利权转移",
      };
      let arr = data.split(";");
      arr.map((res) => {
        if (!str) {
          str += obj[res];
        } else {
          str = str + ";" + obj[res];
        }
      });
      return str;
    },
    calculatePercentage(partial, total) {
      if (total === 0 || isNaN(partial) || isNaN(total)) {
        return 0;
      }
      var percentage = (partial / total) * 100;
      return Math.round(percentage * 100) / 100; // 四舍五入到小数点后两位
    }
  },
  props: {},
  components: {
    CountTo,
    Menu
  },
  async mounted() {
    this.role = this.$store.state.user.role
    this.getReportMenu(this.$route.query.id)
  },
  methods: {
    tabledemo() {
      let list = []
      this.datas.forEach(item => {
        let arr2 = Object.values(item)
        if (arr2.length) {
          list.push(arr2)
        }
      })
      // let contain = document.getElementById('contain')
      console.log(contain, 'contain');

      var str = '';
      //外层循环,生成tr
      for (var i = 0; i <= list.length - 1; i++) {
        // 外层循环生成tr标签,循环几次,就生成几个tr标签
        // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
        str += '<tr>';

        // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1
        str += ``;

        //当前行,对应的二维数组，循环的对象是 arr[i] , 
        //生成 arr[i] 的所有的索引下标，通过索引下标,获取对应的数据。
        // 起始数值是0 终止数值是 arr[i]的最大索引下标，arr[i]的length-1
        for (var j = 0; j <= list[i].length - 1; j++) {
          // 每一个单元的内容,就是当前二维数组单元的数据内容
          // 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
          str += `<td>${list[i][j]}</td>`;
        }
        str += '</tr>';
      }
      // 将定义好的内容,写入到taody标签中
      contain.innerHTML = str;
    },
    deepClone(obj) {
      if (obj === null || typeof obj !== 'object') {
        return obj;
      }

      if (obj instanceof Date) {
        return new Date(obj.getTime());
      }

      if (obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
          arr[i] = this.deepClone(item);
          return arr;
        }, []);
      }

      if (obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
          newObj[key] = this.deepClone(obj[key]);
          return newObj;
        }, {});
      }
    },
    visibleChnage(observe) {
      const id = observe[0].target.getAttribute('id')
      if (observe[0].isIntersecting) {
        this.nodeKey = Number(id)
      }
    },
    removeClass() {
      const list = document.querySelectorAll("#toc .li a");
      Array.from(list, v => v.classList.remove("li-active"));
    },
    NodeClick(data) {
      this.nodeKey = data.id
      window.scrollTo({ top: this.$refs['BOX' + this.nodeKey][0].offsetTop - 80, behavior: "smooth" });
    },
    async getReportMenu(id) {
      await getReportMenu().then(res => {
        this.menuOld = res
      })

      let res = {
        menu: []
      }
      res.menu = JSON.parse(localStorage.getItem('menu'))

      let menu = []
      const Numbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九'];

      //过滤show
      menu = res.menu.filter((item, index) => {
        this.menuTrueId.push(item.id)
        return item
      })

      //动态添加标题（一）
      menu = menu.filter((item, index) => {
        const chineseNumbers = ['一', '二', '三', '四'];
        // item.title = '第' + chineseNumbers[index] + '部分 ' + item.label
        item.title = chineseNumbers[index] + '、 ' + item.label
        return item
      })


      //过滤show
      menu = menu.map((item, index) => {
        item.children = item.children.filter((item1, index1) => {
          this.menuTrueId.push(item1.id)
          if (item1.children) {
            item1.children.map((item1_) => {
              this.menuTrueId.push(item1_.id)
            })
          }
          return item1
        })
        return item
      })
      //动态添加标题（二）
      menu = menu.map((item, index) => {
        item.children = item.children.filter((item1, index1) => {
          // item1.title = Numbers[0] + '、' + item1.label
          item1.title = "（" + Numbers[0] + '）' + item1.label
          Numbers.shift()
          return item1
        })
        return item
      })

      // 大纲高亮
      setTimeout(() => {
        this.observer = new IntersectionObserver(this.visibleChnage);
        this.menuTrueId.map(item => {
          if (this.$refs['BOX' + item]) {
            this.observer.observe(this.$refs['BOX' + item][0])
          }
        })
      }, 1000);

      this.menuList = menu
      console.log(this.menuList, 'menuList')
      this.role.map(async res_ => {
        if (res_.name == '数据' && res_.is_show == 1) {
          this.roleData = true
          this.changeList = await center({ type: this.type })
          // this.getleftlist()
        }
      })
      this.getReportData(this.$route.query.id)
    },
    permission(id, type1) { //判断显示是否加载
      let type = false
      this.menuList.map(res => {
        res.children.map(res1 => {
          if (res1.id == id) {
            type = true
          }
        })
      })

      return type
    },

    async getleftlist() {
      if (!this.permission(5)) return

      let leftList = await getleftlist({
        type: this.type
      })
      this.Histogram1 = leftList.open
      this.Histogram2 = leftList.auth
      this.Histogram3 = leftList.news
      this.Histogram4 = leftList.apper


      let chartDom1 = document.getElementById('left_box_t');
      let chartDom2 = document.getElementById('left_box_t_z');
      let chartDom3 = document.getElementById('left_box_b_z');
      let chartDom4 = document.getElementById('left_box_b');
      //柱状图
      this.$nextTick(() => {
        let myChartHistogram1 = echarts.init(chartDom1, 'dark', { devicePixelRatio: 2 });
        let myChartHistogram2 = echarts.init(chartDom2, 'dark', { devicePixelRatio: 2 });
        let myChartHistogram3 = echarts.init(chartDom3, 'dark', { devicePixelRatio: 2 });
        let myChartHistogram4 = echarts.init(chartDom4, 'dark', { devicePixelRatio: 2 });

        let option1 = this.HistogramOption(this.Histogram1, this.dimensions1)
        let option2 = this.HistogramOption(this.Histogram2, this.dimensions1)
        let option3 = this.HistogramOption(this.Histogram3, this.dimensions1)
        let option4 = this.HistogramOption(this.Histogram4, this.dimensions1)

        myChartHistogram1.setOption(option1)
        myChartHistogram2.setOption(option2)
        myChartHistogram3.setOption(option3)
        myChartHistogram4.setOption(option4)

        window.addEventListener("resize", function () {
          myChartHistogram1.resize();
          myChartHistogram2.resize();
          myChartHistogram3.resize();
          myChartHistogram4.resize();
        })
      })
    },
    HistogramOption(dataList, dimensions) {
      return {
        tooltip: {
          textStyle: { // 提示框浮层的文本样式。
            color: '#41feff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 10,
          },
          backgroundColor: 'rgba(12, 16, 63,.7)',
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (datas) {
            let prp_name = datas[0].value.prp_name;
            let ratio_name = datas[0].value.ratio_name;
            if (dimensions.length > 3) {
              let res = `
                <div>
                  <span>本月：${datas[0].value.本月数量}</span>
                  <span>全区占比：${datas[0].value.全区占比}</span>
                </div>
                <div>
                  <span>上月：${datas[0].value.上月数量}</span>
                  <span style='color:#40FFAF'>${ratio_name}：${datas[0].value.ratio_add}</span>
                </div>
                <div>
                  <span>去年同期：${datas[0].value.去年同期}</span>
                  <span style='color:#FF443A'>${prp_name}：${datas[0].value.prp_add}</span>
                </div>
              `
              return res;

            } else {
              let res = `
                  <span>${datas[0].value.product}</span>

                <div>
                  <span>本月数量：${datas[0].value.本月数量}</span>
                </div>
                <div>
                  <span>上月数量：${datas[0].value.上月数量}</span>
                </div>
              `
              return res;

            }

          }
        },

        backgroundColor: '', //设置无背景色
        grid: { // 让图表占满容器
          top: "60px",
          left: "60px",
          right: "30px",
          bottom: "40px"
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            '上月数量': true,
            '本月数量': true,
            '去年同期': true
          }
        },
        dataset: {
          dimensions: dimensions,
          source: dataList
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              //获取页面宽度
              let width = document.body.clientWidth;
              //根据宽度判断显示字数
              if (width <= 1360) {
                return value.split("").join("\n");
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: { //不显示分割线
            show: false
          }
        },
        series: dimensions.length == 4 ?
          [
            {
              type: 'bar',
              itemStyle: {
                color: '#5f54f7'
              },
              label: {
                show: true, // 显示数值
                position: 'top', // 在顶部显示

              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#47a9e4'
              },
              label: {
                show: true, // 显示数值
                position: 'top', // 在顶部显示
                // 可以通过 formatter 自定义显示格式
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#0ffbdc'
              },
              label: {
                show: true, // 显示数值
                position: 'top', // 在顶部显示
                // 可以通过 formatter 自定义显示格式
              }
            }
          ]
          :
          [
            {
              type: 'bar',
              itemStyle: {
                color: '#6153fa'
              },
              label: {
                show: true, // 显示数值
                position: 'top', // 在顶部显示
                // 可以通过 formatter 自定义显示格式
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#49a8e6'
              },
              label: {
                show: true, // 显示数值
                position: 'top', // 在顶部显示
                // 可以通过 formatter 自定义显示格式
              }
            }
          ],
      };

    },
    indexMethod(index) {
      return index + 1
    },
    updateIso() {
      updateIso({
        report_id: this.$route.query.id
      }).then(res => {
        this.$message({
          message: '更新成功',
          type: 'success',
          duration: 1500,
          onClose: (() => {
            this.getReportData(this.$route.query.id)
          })
        });
      })
    },
    hasGreaterThanTwo(array) {
      return array.some(function (item) {
        return item > 2;
      });
    },
    change() {
      this.getReportData()
    },
    getMonth() {
      getMonth().then(res => {
        this.options = res
        this.start_time = this.options[0].value
        this.getReportData()
      })
    },
    moreList(type, dataName) {
      let routerJump = this.$router.resolve({
        path: "/analysisMoreList",
        query: {
          report_id: this.$route.query.id,
          type: type,
          dataName: dataName
        },
      });
      window.open(routerJump.href, "_blank");
    },
    tableclick(row, column, event) {

      let routerJump = this.$router.resolve({
        path: "/workEnterprisevisit",
        query: {
          id: row.id,
          company_id: row.company_id,
        },
      });
      window.open(routerJump.href, "_blank");
    },
    rowClick(row, column, event) {
      //新窗口打开
      const { href } = this.$router.resolve({
        path: "/detail",
      });
      window.open(href + `?pid=${row.pid}&preview=1`, "_blank");
    },
    see(row, column, event) {
      //新窗口打开
      const { href } = this.$router.resolve({
        path: "/analysisLitigation",
      });
      window.open(href + `?id=${row.cid}`, "_blank");
    },
    tableclickName(row) {
      getCompanyId({
        company: row.company,
      }).then((res) => {
        let routerJump = this.$router.resolve({
          path: "/workEnterprisevisit",
          query: {
            company_id: res.id,
          },
        });
        window.open(routerJump.href, "_blank");
      });
    },
    getReportData(id) {
      reportInfo({
        report_id: id,
      }).then(res => {
        try {
          this.reportData = res.visit_json
          this.allData = res

          this.name_arr = []
          this.reportData.value_arr.map((res, index) => {
            if (res >= 2) {
              let obj = {
                number: '',
                name: ''
              }
              obj.number = res
              obj.name = this.reportData.name_arr[index]
              this.name_arr.push(obj)
            }
          })
          this.name_arr = this.name_arr.slice(0, 3)

          this.organization_list = []
          Object.keys(this.reportData.organization_list).forEach(key => {
            if (this.reportData.organization_list[key] >= 2) {
              let obj = {
                number: this.reportData.organization_list[key],
                name: key
              }
              if (this.organization_list.length < 3) {
                this.organization_list.push(obj)
              }
            }
          });

          this.company_visit_arr = []
          Object.keys(this.reportData.company_visit_arr).forEach(key => {
            if (this.reportData.company_visit_arr[key] >= 2) {
              let obj = {
                number: this.reportData.company_visit_arr[key],
                name: key
              }
              if (this.company_visit_arr.length < 3) {
                this.company_visit_arr.push(obj)
              }

            }
          });

          this.lawData.one_json = res.one_json
          this.lawData.two_json = res.two_json
          this.lawData.street_json = res.street_json


          if (this.lawData.street_json) {
            this.lawData.street_json.table1.push(this.lawData.street_json.table1_tail)
            this.lawData.street_json.table2.push(this.lawData.street_json.table2_tail)
            this.lawData.street_json.table3.push(this.lawData.street_json.table3_tail)
            this.lawData.street_json.company_rank_arr = this.lawData.street_json.company_rank_arr.filter(function (item) {
              return item.name != '/';
            });
            //lawData.street_json.company_rank_arr筛选里面有多少重复项
            let arr = []
            let company_rank_arr = {}
            this.lawData.street_json.company_rank_arr.map((res) => {
              if (arr.indexOf(res.name) == -1) {
                arr.push(res.name)
                company_rank_arr[res.name] = 1
              } else {
                company_rank_arr[res.name] += 1
              }
            })
            this.lawData.street_json.company_rank_arr_repeat = company_rank_arr
            this.lawData.street_json.pct_info_arr = this.lawData.street_json.pct_info_arr.map((res) => {
              res.value = Number(res.num)
              return res
            })
            console.log(this.lawData.street_json.pct_info_arr, 'this.lawData.street_json.pct_info_arr');
            this.lawData.street_json.trademark_info_arr = this.lawData.street_json.trademark_info_arr.map((res) => {
              res.value = Number(res.num)
              return res
            })
          }

          this.lawData.three_json = res.three_json
          this.lawData.three_json.preserve_arr.map(res => {
            this.three_jsonEchartsNum += res.value

            if (res.name == '发明') {
              this.three_jsonEcharts[0].value = res.value
            } else if (res.name == '实用新型') {
              this.three_jsonEcharts[1].value = res.value
            } else if (res.name == '外观设计') {
              this.three_jsonEcharts[2].value = res.value
            }
          })


          this.lawData.four_json = res.four_json

          this.lawData.five_json = res.five_json




          this.tableData_one_arr = res.visit_json.honor_one_arr
          this.tableData_two_arr = res.visit_json.honor_two_arr
          this.tableData_three_arr = res.visit_json.honor_three_arr
          this.tableData_four_arr = res.visit_json.honor_four_arr
          this.tableData_five_arr = res.visit_json.honor_five_arr
          this.tableData_six_arr = res.visit_json.honor_six_arr

          this.tableData2 = res.visit_json.demand_list

          this.$nextTick(() => {
            setTimeout(() => {
              this.pieData1()
              this.barData()
              this.pieData2()
              this.pieData3()
              this.pieData4()
              this.pieData5()
              this.pieData6()

              this.Bar()
              this.Pie()
              this.pie_demand()
              this.pie_low1()
              this.pie_low3()
              this.pie_low6()
              this.pie_low4()
              this.pie_low7()
              this.pie_low5()
            }, 0)


            setTimeout(() => {
              this.loadPdfType = true
            }, 3000)


            // this.tabledemo()

          })
        } catch (error) {
          console.log(error);
          // this.$message.error(error);
        }
      })
    },
    Export1() {
      window.open(
        `${VUE_APP_BASE_API}/v1/export/schoolExcel?report_id=${this.$route.query.id}`
      );
    },
    demandData(value) {
      let routerJump = this.$router.resolve({
        path: "/workWaitvisit3",
        query: {
          type: 5,
          name: value
        },
      });
      window.open(routerJump.href, "_blank");
    },
    pushworkWaitvisit() {
      let routerJump = this.$router.resolve({
        path: "/workWaitvisit2",
        query: {
          type: 3,
          date: this.allData.start_time.slice(0, 4) + '-' + this.allData.start_time.slice(4, 6) + '-' + this.allData.start_time.slice(6, 8),
          date_end: this.allData.end_time.slice(0, 4) + '-' + this.allData.end_time.slice(4, 6) + '-' + this.allData.end_time.slice(6, 8),
        },
      });
      window.open(routerJump.href, "_blank");
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      if (this.needToMergeColumns.indexOf(column.property) !== -1) {
        // 获取当前单元格的值
        const currentValue = row[column.property];
        // 获取上一行相同列的值
        const preRow = this.tableData_one_arr[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { 'rowspan': 0, 'colspan': 0 };
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData_one_arr.length; i++) {
            const nextRow = this.tableData_one_arr[i];
            const nextValue = nextRow[column.property];
            if (nextValue === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          return { 'rowspan': rowspan, 'colspan': 1 };
        }
      }
      // }
    },
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      if (this.needToMergeColumns.indexOf(column.property) !== -1) {
        // 获取当前单元格的值
        const currentValue = row[column.property];
        // 获取上一行相同列的值
        const preRow = this.tableData_two_arr[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { 'rowspan': 0, 'colspan': 0 };
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData_two_arr.length; i++) {
            const nextRow = this.tableData_two_arr[i];
            const nextValue = nextRow[column.property];
            if (nextValue === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          return { 'rowspan': rowspan, 'colspan': 1 };
        }
      }
      // }
    },
    objectSpanMethod3({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      if (this.needToMergeColumns.indexOf(column.property) !== -1) {
        // 获取当前单元格的值
        const currentValue = row[column.property];
        // 获取上一行相同列的值
        const preRow = this.tableData_three_arr[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { 'rowspan': 0, 'colspan': 0 };
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData_three_arr.length; i++) {
            const nextRow = this.tableData_three_arr[i];
            const nextValue = nextRow[column.property];
            if (nextValue === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          return { 'rowspan': rowspan, 'colspan': 1 };
        }
      }
      // }
    },
    objectSpanMethod4({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      if (this.needToMergeColumns.indexOf(column.property) !== -1) {
        // 获取当前单元格的值
        const currentValue = row[column.property];
        // 获取上一行相同列的值
        const preRow = this.tableData_four_arr[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { 'rowspan': 0, 'colspan': 0 };
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData_four_arr.length; i++) {
            const nextRow = this.tableData_four_arr[i];
            const nextValue = nextRow[column.property];
            if (nextValue === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          return { 'rowspan': rowspan, 'colspan': 1 };
        }
      }
      // }
    },
    objectSpanMethod5({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      if (this.needToMergeColumns.indexOf(column.property) !== -1) {
        // 获取当前单元格的值
        const currentValue = row[column.property];
        // 获取上一行相同列的值
        const preRow = this.tableData_five_arr[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { 'rowspan': 0, 'colspan': 0 };
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData_five_arr.length; i++) {
            const nextRow = this.tableData_five_arr[i];
            const nextValue = nextRow[column.property];
            if (nextValue === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          return { 'rowspan': rowspan, 'colspan': 1 };
        }
      }
      // }
    },
    objectSpanMethod6({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      if (this.needToMergeColumns.indexOf(column.property) !== -1) {
        // 获取当前单元格的值
        const currentValue = row[column.property];
        // 获取上一行相同列的值
        const preRow = this.tableData_six_arr[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { 'rowspan': 0, 'colspan': 0 };
        } else {
          // 否则计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData_six_arr.length; i++) {
            const nextRow = this.tableData_six_arr[i];
            const nextValue = nextRow[column.property];
            if (nextValue === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          return { 'rowspan': rowspan, 'colspan': 1 };
        }
      }
      // }
    },
    barData() {
      if (!this.permission(2)) return

      var chartDom = this.$refs.barData[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });


      var option = {
        animation: false, // 关闭动画
        legend: {
          bottom: '0px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: "20px",
          left: "10px",
          right: "30px",
          bottom: "20px",
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.lawData.street_json.add_arr.month_this_street_name,
          axisLabel: {
            show: true, // 是否显示X轴的内容，不包含两端的文字
            interval: 0,
            lineHeight: 18,
            formatter: (params) => {
              if (this.reportData.name_arr.length > 7) {
                return params.split("-")[1] ? params.split("-")[1].split(" ").join("").split("").join("\n") : params.split("-")[0].split(" ").join("").split("").join("\n")
              } else {
                return params.split("-")[1] ? params.split("-")[1].split(" ").join("").split("").join("") : params.split("-")[0].split(" ").join("").split("").join("")
              }
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.lawData.street_json.add_arr.month_this,
            name: this.lawData.street_json.add_arr.title_this,
            type: 'bar',
            label: {
              show: true, // 显示数值
              position: 'top', // 在顶部显示
              // 可以通过 formatter 自定义显示格式
              formatter: '{c}' // {c} 表示数据值
            }
          },
          {
            data: this.lawData.street_json.add_arr.month_this_last,
            name: this.lawData.street_json.add_arr.title_this_last,
            type: 'bar',
            label: {
              show: true, // 显示数值
              position: 'top', // 在顶部显示
              // 可以通过 formatter 自定义显示格式
              formatter: '{c}' // {c} 表示数据值
            }
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['barData'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    Bar() {
      if (!this.permission(7)) return
      if (this.name_arr.length <= 1) return
      if (!this.reportData.visit_num) return
      var chartDom = this.$refs.bar[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });

      var data = this.reportData.value_arr

      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: "20px",
          left: "10px",
          right: "30px",
          bottom: "0px",
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.reportData.name_arr,
          axisLabel: {

            show: true, // 是否显示X轴的内容，不包含两端的文字
            interval: 0,
            lineHeight: 18,
            formatter: (params) => {
              if (this.reportData.name_arr.length > 13) {
                return params.split("-")[1] ? params.split("-")[1].split(" ").join("").split("").join("\n") : params.split("-")[0].split(" ").join("").split("").join("\n")
              } else {
                return params.split("-")[1] ? params.split("-")[1].split(" ").join("").split("").join("") : params.split("-")[0].split(" ").join("").split("").join("")
              }
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.map((item) => {
              return {
                value: item,
                itemStyle: {
                  color: this.getRandomElement() // 为每个柱子设置随机颜色
                }
              };
            }),
            type: 'bar',
            label: {
              show: true, // 显示数值
              position: 'top', // 在顶部显示
              // 可以通过 formatter 自定义显示格式
              formatter: '{c}' // {c} 表示数据值
            }
          }
        ]
      };
      option && myChart.setOption(option);
      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['bar'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 185,
        });
      }, 1000);
    },
    pieData6() {
      if (!this.permission(4)) return

      var chartDom = this.$refs.pieData6[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: this.lawData.street_json.trademark_info_arr.slice(0, 16),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter: (params) => {
                // 自定义标签内容和样式
                return `${params.data.name}:${params.data.num},占比${params.data.ratio}%`;
              },
              // formatter: '{b}: {c},占比{d}%' // 自定义标签的显示内容，{b} 是数据项名称，{c} 是数值，{d} 是百分比
            }
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pieData6'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pieData5() {
      if (!this.permission(3)) return
      var chartDom = this.$refs.pieData5[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: this.lawData.street_json.pct_info_arr.slice(0, 16),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter: (params) => {
                // 自定义标签内容和样式
                return `${params.data.name}:${params.data.num},占比${params.data.ratio}%`;
              },
              // formatter: '{b}: {c},占比{d}%' // 自定义标签的显示内容，{b} 是数据项名称，{c} 是数值，{d} 是百分比
            }
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pieData5'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pieData4() {
      if (!this.permission(2)) return

      var chartDom = this.$refs.pieData4[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: this.lawData.street_json.lc_apper_arr.slice(0, 16),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter: (params) => {
                // 自定义标签内容和样式
                return `${params.name}:${params.value},占比${params.percent}%`;
              },
              // formatter: '{b}: {c},占比{d}%' // 自定义标签的显示内容，{b} 是数据项名称，{c} 是数值，{d} 是百分比
            }
          }
        ]
      };
      option && myChart.setOption(option);
      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pieData4'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pieData3() {
      if (!this.permission(2)) return

      var chartDom = this.$refs.pieData3[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: this.lawData.street_json.ipc_news_arr.slice(0, 16),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter: (params) => {
                // 自定义标签内容和样式
                return `${params.name}:${params.value},占比${params.percent}%`;
              },
              // formatter: '{b}: {c},占比{d}%' // 自定义标签的显示内容，{b} 是数据项名称，{c} 是数值，{d} 是百分比
            }
          }
        ]
      };
      option && myChart.setOption(option);
      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pieData3'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);

    },
    pieData2() {
      if (!this.permission(2)) return

      var chartDom = this.$refs.pieData2[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: this.lawData.street_json.ipc_invent_arr.slice(0, 16),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter: (params) => {
                // 自定义标签内容和样式
                return `${params.name}:${params.value},占比${params.percent}%`;
              },
              // formatter: '{b}: {c},占比{d}%' // 自定义标签的显示内容，{b} 是数据项名称，{c} 是数值，{d} 是百分比
            }
          }
        ]
      };
      option && myChart.setOption(option);
      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pieData2'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pieData1() {
      if (!this.permission(2)) return
      var chartDom = this.$refs.pieData1[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: this.lawData.street_json.pie_arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter: (params) => {
                // 自定义标签内容和样式
                return `${params.name}:${params.value},占比${this.lawData.street_json.street_admin_arr[this.percentName[params.name]]}%`;
              },
              // formatter: '{b}: {c},占比{d}%' // 自定义标签的显示内容，{b} 是数据项名称，{c} 是数值，{d} 是百分比
            }
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pieData1'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 576,
          height: 270,
        });
      }, 1000);
    },
    Pie() {
      if (!this.permission(8)) return
      if (!(this.reportData.company_num && this.reportData.organization_num)) return
      var chartDom = this.$refs.pie[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: this.reportData.pie_arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter: '{b}: {c},占比{d}%' // 自定义标签的显示内容，{b} 是数据项名称，{c} 是数值，{d} 是百分比
            }
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pie'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 640,
          height: 285,
        });
      }, 1000);
    },
    pie_demand() {
      if (!this.permission(11)) return
      if (!(this.reportData.demand_result.length > 1)) return

      if (!(this.reportData.visit_num && this.reportData.demand_count)) return
      let data = []
      data = this.reportData.demand_result.map((item, index) => {
        let demo = {}
        demo.itemStyle = {
          color: this.piecolor[index]
        }
        demo.value = item.number
        demo.name = item.name
        if (index < this.demandList.length) {
          this.demandList[index].value = item.name
          this.demandList[index].Number = item.number
        }
        return demo
      })

      let chartDom = this.$refs.pie_demand[0];
      let myChart = echarts.init(chartDom, 'dark', { devicePixelRatio: 2 });

      var option = {
        animation: false, // 关闭动画
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '55%'],
            data: data,

            label: {
              textStyle: {
                color: '#000' // 这里设置图例文字的颜色为红色
              },
              // formatter: '{b}:{c},占比{d}%' // {c} 代表数量，{d} 代表百分比
              formatter: function (params) {
                // 自定义标签内容和样式
                return `${params.name}:${params.value},占比${params.percent}%`;
              },
            },
          }
        ]
      }
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pie_demand'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pie_low1() {
      if (!this.permission(13)) return

      if (!(this.lawData.one_json.tongji_patent.length > 1)) return
      if (!this.lawData.one_json.tongji_patent.length) return
      var chartDom = this.$refs.pie_low1[0];

      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   bottom: '0%',
        //   left: 'center'
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.lawData.one_json.tongji_patent,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}:{c},占比{d}%' // {c} 代表数量，{d} 代表百分比
            },
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pie_low1'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pie_low3() {
      if (!this.permission(15)) return

      if (!(this.lawData.three_json.preserve_arr.length > 1)) return
      if (!this.lawData.three_json.preserve) return
      var chartDom = this.$refs.pie_low3[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   bottom: '0%',
        //   left: 'center'
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.lawData.three_json.preserve_arr,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}:{c},占比{d}%' // {c} 代表数量，{d} 代表百分比
            },
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pie_low3'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pie_low6() {
      if (!this.permission(15)) return

      if (!(this.lawData.three_json.pledge_arr.length > 1)) return
      if (!this.lawData.three_json.pledge) return
      var chartDom = this.$refs.pie_low6[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   bottom: '0%',
        //   left: 'center'
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.lawData.three_json.pledge_arr,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}:{c},占比{d}%' // {c} 代表数量，{d} 代表百分比
            },
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pie_low6'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },

    pie_low4() {
      if (!this.permission(16)) return

      if (!(this.lawData.four_json.cake_one_arr.length > 1)) return
      if (!this.lawData.four_json.four_num) return
      var chartDom = this.$refs.pie_low4[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.lawData.four_json.cake_one_arr,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}:{c},占比{d}%' // {c} 代表数量，{d} 代表百分比
            },
          }
        ]
      };
      option && myChart.setOption(option);
      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pie_low4'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pie_low7() {
      if (!this.permission(16)) return
      if (!(this.lawData.four_json.cake_two_arr.length > 1)) return
      if (!this.lawData.four_json.two_num) return
      var chartDom = this.$refs.pie_low7[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.lawData.four_json.cake_two_arr,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}:{c},占比{d}%' // {c} 代表数量，{d} 代表百分比
            },
          }
        ]
      };
      option && myChart.setOption(option);
      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pie_low7'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    pie_low5() {
      if (!this.permission(17)) return

      if (!(this.lawData.five_json.column_key_arr.length > 1)) return
      if (!this.lawData.five_json.six_count) return
      var chartDom = this.$refs.pie_low5[0];
      var myChart = echarts.init(chartDom, null, { devicePixelRatio: 2 });
      var option = {
        animation: false, // 关闭动画
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: "20px",
          left: "10px",
          right: "30px",
          bottom: "0px",
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.lawData.five_json.column_key_arr,
          axisLabel: {

            show: true, // 是否显示X轴的内容，不包含两端的文字
            interval: 0,
            lineHeight: 18,
            formatter: (params) => {
              return params.split("-")[1] ? params.split("-")[1].split(" ").join("").split("").join("\n") : params.split("-")[0].split(" ").join("").split("").join("\n")
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.lawData.five_json.column_value_arr.map((item) => {
              return {
                value: item,
                itemStyle: {
                  color: this.getRandomElement() // 为每个柱子设置随机颜色
                }
              };
            }),
            type: 'bar',
            label: {
              show: true, // 显示数值
              position: 'top', // 在顶部显示
              // 可以通过 formatter 自定义显示格式
              formatter: '{c}' // {c} 表示数据值
            }
          }
        ]
      };
      option && myChart.setOption(option);

      setTimeout(() => {
        // 获取echart图片
        this.evaluationInfo['pie_low5'] = myChart.getDataURL({
          pixelRatio: 2,
          width: 600,
          height: 300,
        });
      }, 1000);
    },
    downloadChart(url, filename) {
      const link = document.createElement('a'); // 创建一个a标签
      link.href = url; // 设置a标签的href属性为给定的url
      link.download = filename; // 把a标签的download属性设置为filename
      link.target = '_blank'; // 在新的浏览器窗口或标签页中打开链接
      link.click(); // 模拟点击a标签，触发浏览器的下载功能
      link.remove(); // 从DOM中删除a标签
    },
    async loadPdf() {
      if (!this.loadPdfType) {
        this.$message('报告加载中，请稍等');
        return
      }

      this.PdfType = true;
      // word
      this.$nextTick(() => {
        let contenthtml = this.$refs.pdfBox.innerHTML
        contenthtml = contenthtml.replace(/break-(after|before): page/g, 'page-break-$1: always;')

        let cssHTML = `
        th {
          font-size: 14px;
        }
        td {
          font-size: 14px;
        }
        body {
          font-family: 'FangSong', 'STFangsong', serif; /* 指定仿宋字体及其备选字体 */
        }
        .page-break {
            page-break-before: always;
        }
        .visitItem1 {
          text-align: center;
            background-color: #f5f6fa;
            height: 130px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px 0;
        }
        .number1{
          color: #1269fe;
          font-size: 28px;
              font-weight: bold;
              margin-bottom : 20px
        }
        .number2{
          color: #7f6aed;
          font-size: 28px;
              font-weight: bold;
              margin-bottom : 20px
        }
        .number3{
          fcolor: #fe886c;
          font-size: 28px;
              font-weight: bold;
              margin-bottom : 20px
        }
        .number4{
          color: #31cfb6;
          font-size: 28px;
              font-weight: bold;
              margin-bottom : 20px
        }
        .titleSmallSize2 {
          font-size: 18.5px;
          text-align: center;
          margin-bottom: 20px;
          margin-top: 20px;
          font-family: "SimSun", "宋体", sans-serif;
          font-weight: bold;
        }
        span {
          margin-bottom: 0px !important;
        }
        .title1 {
          margin-bottom: 20px;
          font-size: 20px;
          padding-top: 30px;
          font-weight: bold;
          border-top: 3px solid #eeeeee;
          font-family: "SimSun", "宋体", sans-serif;
        }
        .tableBox {
          width: 100% !important;
        }
        table {
          margin: 20px !important;
        }
        .titleBig {
          font-size: 30px;
          margin-top: 30px;
          font-weight: bold;
          padding-bottom: 20px;
          display: flex;1
          justify-content: space-between;
        }
        .title {
          margin-bottom: 10px;
          font-size: 19px;
          margin-top: 20px;
          font-weight: bold;
          font-family: "SimSun", "宋体", sans-serif;
        }
        .topBox {
          margin-bottom: 20px;
        }
        .topBox .textS {
          text-indent: 40px;
          font-size: 19px;
          line-height: 38px;
        }
        .textS span{
          text-indent: 40px;
          margin-bottom: 0px;
        }
        .titleSmallSize1 {
          font-size: 20px;
          margin-bottom: 10px;
          margin-top: 20px ;
          font-weight: bold;
          font-family: "SimSun", "宋体", sans-serif;
          text-indent: 42px;
          display: inline-block;
        }
        .titleSmallSize11 {
          font-size: 20px;
          margin-bottom: 10px !important;
          margin-top: 20px !important;
          font-weight: bold;
          font-family: "SimSun", "宋体", sans-serif;
          text-indent: 42px;
        }
        .titleSmallSize {
         
        }
        .legendText {
          text-align: center;
          font-size: 14px;
          margin-top: 20px;
          margin-bottom: 5px;
          font-family: "SimSun", "宋体", sans-serif;
        }
        .legendTextTop {
          text-align: center;
          font-size: 14px;
          margin-top: 20px;
          font-family: "SimSun", "宋体", sans-serif;
          margin-bottom: 5px;
        }
        .round {
          font-weight: bold;
          font-size: 31px;
          margin-bottom: 0px !important;
          line-height: 18px !important;
        }
        .textTitle {
          margin-top: 10px;
          font-weight: bold;
        }
        .number {
          color: #0455f5;
          cursor: pointer;
          font-size: 19px;
        }
        .title_4 {
          margin-bottom: 5px;
          font-size: 18px;
          text-indent: 38px;
          margin-top: 20px;
          font-weight: bold;
          color: #5571c5;
        }
          li::marker {
            font-size: 31px; /* 调整为你想要的大小 */
          }
          table,
        th,
        td {
          border: 1px solid #ebeef5;
          border-collapse: collapse;
        }

        th,
        td {
          padding: 10px;
        }
        th {
          background-color: #4e81f6;
          color: #fff;
          font-weight: bold;
          font-size: 14px;
        }
        td {
          color: #000;
        }
        table {
          width: 100%;
        }
        .merge>div {
          margin-top: 5px;
        }
        .red {
          color: #ff5f58;
          border: 1px solid #ff5f58;
          display: inline-block;
          padding: 0 5px;
          width: 50px;
          border-radius: 5px;
          text-align: center;
        }
        .blue {
          border: 1px solid #4e81f6;
          color: #4e81f6;
          display: inline-block;
          width: 50px;
          padding: 0 5px;
          border-radius: 5px;
          text-align: center;
        }

        `;
        let content =
          `<!DOCTYPE html>
        <html>
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <style>
            ${cssHTML}
          </style>
        </head>
        <body>
          
          `
        content +=
          `
          ${contenthtml}
        `
        content += '</body></html>'
        const options = {
        orientation: 'portrait', // 页面方向，可选 'portrait' 或 'landscape'
        pageBreaks: true, // 是否在段落后添加分页符
        pageMargins: [1, 1, 1.5, 1.5], // 页边距（上，下，左，右）以英寸为单位
        pageBreakSelector: 'h1', // 触发分页的CSS选择器，默认为'h1'
        pageNumberSelector: '.page-number', // 页码选择器，默认为无
        pageNumberStart: 1, // 页码起始值，默认为1
        pageNumberStyle: 'decimal', // 页码样式，默认为'decimal'（十进制）
        pageNumberResetSelector: 'h1', // 重置页码的选择器，默认为无
      };
        let converted = htmlDocx.asBlob(content,options)
        saveAs.saveAs(converted, '分析板块报告.docx')

        this.PdfType = false;
        this.$nextTick(() => {
          this.pieData1()
          this.barData()
          this.pieData2()
          this.pieData3()
          this.pieData4()
          this.pieData5()
          this.pieData6()

          this.Bar()
          this.Pie()
          this.pie_demand()
          this.pie_low1()
          this.pie_low3()
          this.pie_low6()
          this.pie_low4()
          this.pie_low7()
          this.pie_low5()
        })
      })

    },
    getRandomElement() {
      let colorArr = ['#5571c5', '#90cc77', '#fac85b', '#ee6666', '#73c0de', '#3aa273', '#fc8453', '#9a61b3', '#ea7dcb', '#5571c4', '#90cc77', '#fac85b', '#ee6666', '#73c0de', '#3aa273', '#fc8453', '#9a61b3', '#ea7dcb']
      const randomIndex = Math.floor(Math.random() * colorArr.length);
      return colorArr[randomIndex];
    },
  },
};
</script>

<style scoped lang="less">
.titleSmallSize1 {}

table,
th,
td {
  border: 1px solid #ebeef5;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
}

body {
  font-family: 'FangSong', 'STFangsong', serif;
  /* 指定仿宋字体及其备选字体 */
}

table {
  width: 100%;

  th {
    background-color: #4e81f6;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }

  td {
    color: #606266;
  }
}

::v-deep .el-drawer__header {
  margin-bottom: 22px;
  padding: 15px 20px 0;
}

.tip {
  width: 700px;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  height: 60px;
  z-index: 99;

  .tip_title {
    font-size: 26px;
    font-weight: bold;
    color: #409eff;
  }
}

.legendText {
  text-align: center;
  font-size: 12px;
  margin-bottom: 5px;
  margin-top: 20px;
}

.legendTextTop {
  margin-top: 20px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 12px;
}

.merge {
  &>div {
    margin-top: 5px;
  }

  &>div:nth-child(1) {
    margin-top: 0px;
  }

  .red {
    color: #ff5f58;
    border: 1px solid;
    display: inline-block;
    padding: 0 5px;
    border-radius: 5px;
  }

  .blue {
    color: #4e81f6;
    border: 1px solid;
    display: inline-block;
    padding: 0 5px;
    border-radius: 5px;
  }
}

::v-deep .el-select {

  input {
    // background: #409eff;
  }
}

.more {
  color: #4e81f6;
  text-align: right;
  margin-top: 5px;
  cursor: pointer;
}

.download {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demand_box {
  margin-bottom: 10px;
  height: 100px;

  .left_demand {
    background-color: #f5f6fa;
    height: 100%;
    text-align: left;
    font-size: 16px;
    padding: 38px 0px 29px 46px;
    line-height: initial;
    position: relative;
    color: var(--bgc);
    position: relative;
    cursor: pointer;

    .left_demand_new {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .demand_title {
      display: inline-block;
      position: relative;

      span {
        cursor: pointer;
      }

    }

    .demand_title::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 12px;
      border-radius: 3px;
      background-color: var(--bgc);
      margin-right: 5px;
      vertical-align: middle;
      position: absolute;
      top: 50%;
      left: -10px;
      transform: translate(0px, -50%);
    }
  }
}

.pie_new {
  height: 100%;

  .pie {
    height: 100%;
  }
}

.table {
  // padding: 20px 0px;
  margin-top: 20px;
}

.echartsBox {
  width: 100%;
  height: 185px;
  margin-top: 20px;
}

.topBox {
  // border-bottom: 3px solid #f4f5f7;
  margin-bottom: 20px;

  .itemData {
    margin-top: 60px;
  }

  .textS {
    line-height: 28px;

    &>span {
      display: inline-block;
      text-indent: 2em;
      margin-bottom: 20px;
    }

    &>div {
      // text-indent: 2em;
      margin-bottom: 20px;
    }

    &>span:last-child {
      margin-bottom: 0;
    }
  }

  .number {
    color: #0455f5;
    cursor: pointer;
  }

  .textTitle {
    margin-top: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;

    .round {
      font-size: 29px;
    }
  }
}

.time {
  margin: 20px 0;
  font-size: 14px;
}

.company_title {
  font-weight: bolder;
  font-size: 24px;
  margin-bottom: 5px;
  position: relative;
  margin-top: 50px;
}

.share {
  line-height: initial;

  .box {
    display: flex;
    justify-content: center;
    padding-top: 35px;

    .itemBox {
      width: 700px;

      .question {
        padding: 0px 30px 25px 30px;
        border-radius: 10px;
        margin: 10px 0;

        .title {
          margin-bottom: 10px;
          font-size: 22px;
          margin-top: 20px;
          font-weight: bold;

          span {
            font-weight: initial;
          }
        }

        .title_4 {
          margin-bottom: 5px;
          font-size: 16px;
          margin-top: 10px;
          font-weight: bold;
          color: #5571c5;

          span {
            font-weight: initial;
          }
        }

        .title1 {
          margin-bottom: 20px;
          font-size: 26px;
          padding-top: 30px;
          font-weight: bold;
          border-top: 3px solid #eeeeee;
        }

        .titleSmall {
          text-align: center;
        }

        .titleSmallSize {
          font-size: 18px;
        }

        .visitBox {
          display: flex;
          justify-content: space-between;
          gap: 10px;

          .visitItem {
            text-align: center;
            background-color: #f5f6fa;
            height: 130px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px 0;

            .number {
              font-size: 26px;
              font-weight: bold;
            }

            &:nth-child(1) .number {
              color: #1269fe;
            }

            &:nth-child(2) .number {
              color: #7f6aed;
            }

            &:nth-child(3) .number {
              color: #fe886c;
            }

            &:nth-child(4) .number {
              color: #31cfb6;
            }
          }
        }
      }
    }
  }
}

.titleBig {
  font-size: 28px;
  margin-top: 30px;
  font-weight: bold;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {
  .share .box .itemBox {
    width: 100%;
  }
}</style>
